[Bins] Re: prefetching html vs prefetching image

Martin Michlmayr tbm at cyrius.com
Fri Nov 4 20:45:34 GMT 2005


tags 210697 + patch
thanks

* Martin Michlmayr <tbm at cyrius.com> [2005-11-04 19:51]:
> Does anyone know whether two "link rel" elements are allowed, and has
> anyone implemented this for some templates already?

I just tested this on my web server and multiple "link rel='next'"
elements indeed seem to be allowed.  Furthermore, combining them with
JS preloading will only load the image once, so there's no harm in
adding these HTML headers.

Below is a patch:

It splits IMG_PRELOAD into two variables:
  - JS_IMG_PRELOAD to say whether JavaScipt preloading should be used
  - IMG_PRELOAD_SRC to indicate the source of the image to be loaded
(the old IMG_PRELOAD is retained for backwards compatibility)

I've then added some HTML headers loading IMG_PRELOAD_SRC, and
modified the existing JS code to check for JS_IMG_PRELOAD and use
IMG_PRELOAD_SRC.  I think it makes sense to include the HTML
preloading code in all cases but, if you think that's bad idea, it's
trivial to introduce HTML_IMG_PRELOAD.  Just let me know.

Comments?


diff -urN bins-1.1.29~/bins bins-1.1.29/bins
--- bins-1.1.29~/bins	2005-11-04 20:22:05.000000000 +0000
+++ bins-1.1.29/bins	2005-11-04 20:24:13.000000000 +0000
@@ -3565,8 +3565,11 @@
     $subs_hash{IMG_NUM} = $imageHashRef->{$size}{imgNum};
     $subs_hash{IMG_COUNT} = $imageHashRef->{$size}{imgCount};
     if ($configHash->{javaScriptPreloadImage}) {
-        $subs_hash{IMG_PRELOAD} = $imageHashRef->{$size}{preloadIMG};
+        $subs_hash{IMG_PRELOAD} = $imageHashRef->{$size}{preloadIMG}; # only for
+            # backwards compatibility
+        $subs_hash{JS_IMG_PRELOAD} = $imageHashRef->{$size}{preloadIMG};
     }
+    $subs_hash{IMG_PRELOAD_SRC} = $imageHashRef->{$size}{preloadIMG};
     $subs_hash{PREV_IMAGE} = $imageHashRef->{$size}{prevHTML};
     $subs_hash{NEXT_TITLE} = $imageHashRef->{$size}{nextTitle};
     $subs_hash{PREV_TITLE} = $imageHashRef->{$size}{prevTitle};
diff -urN bins-1.1.29~/templates.joi/image.html bins-1.1.29/templates.joi/image.html
--- bins-1.1.29~/templates.joi/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.joi/image.html	2005-11-04 20:29:01.000000000 +0000
@@ -30,6 +30,9 @@
 	  href="<TMPL_VAR NAME=LAST_IMAGE>"
 	  title="<TMPL_VAR NAME=STRING_LAST>">
     <!-- /TMPL_IF -->
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
     <!-- TMPL_IF NAME="PREV_IMAGE_PAGE" -->
     <link
 	  rel="prev"
@@ -63,8 +66,8 @@
   <body <TMPL_IF NAME="BG_IMAGE">
         background="<TMPL_VAR NAME="BG_IMAGE">"
       </TMPL_IF>
-      <!-- TMPL_IF NAME=IMG_PRELOAD -->
-        onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD -->')"<!-- /TMPL_IF -->>
+      <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
+        onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->')"<!-- /TMPL_IF -->>
 
     <table border="0" cellspacing="2" cellpadding="5" width="100%">
       <tr class="path">
diff -urN bins-1.1.29~/templates.marc/image.html bins-1.1.29/templates.marc/image.html
--- bins-1.1.29~/templates.marc/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.marc/image.html	2005-11-04 20:29:11.000000000 +0000
@@ -26,6 +26,9 @@
 	  href="<TMPL_VAR NAME=LAST_IMAGE>"
 	  title="<TMPL_VAR NAME=STRING_LAST>">
     <!-- /TMPL_IF -->
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
     <!-- TMPL_IF NAME="PREV_IMAGE_PAGE" -->
     <link
 	  rel="prev"
@@ -65,8 +68,8 @@
 <body <TMPL_IF NAME="BG_IMAGE">
 	background="<TMPL_VAR NAME="BG_IMAGE">"
 </TMPL_IF>
-<!-- TMPL_IF NAME=IMG_PRELOAD -->
-	onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD -->')"<!-- /TMPL_IF -->>
+<!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
+	onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->')"<!-- /TMPL_IF -->>
 
 <div class="path">			<TMPL_INCLUDE NAME="path.html">		</div>
 <div class="imagenavbar.html">	<TMPL_INCLUDE NAME="imagenavbar.html">	</div>
diff -urN bins-1.1.29~/templates.mwolson/image.html bins-1.1.29/templates.mwolson/image.html
--- bins-1.1.29~/templates.mwolson/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.mwolson/image.html	2005-11-04 20:29:16.000000000 +0000
@@ -1,13 +1,13 @@
 <!-- TMPL_INCLUDE NAME="header.html" -->
 
-    <!-- TMPL_IF NAME=IMG_PRELOAD -->
+    <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
     <!-- preload next image of same size to speed up the album browsing -->
     <script type="text/javascript" language="javascript">
       <!-- hide from non JavaScript Browsers
         function PreloadNextImage() {
 	  nextimg = new Image();
 	  nextimg.src =
-	    "<!-- TMPL_VAR NAME=IMG_PRELOAD -->";
+	    "<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->";
 	}
       // End hiding -->
     </script>
@@ -22,6 +22,9 @@
 	  href="<TMPL_VAR NAME=LAST_IMAGE>"
 	  title="<TMPL_VAR NAME=STRING_LAST>">
     <!-- /TMPL_IF -->
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
     <!-- TMPL_IF NAME="PREV_IMAGE_PAGE" -->
     <link
 	  rel="prev"
@@ -52,8 +55,8 @@
 	  title="<TMPL_VAR NAME=TREE_TITLE>">
 </head>
 
-<body <!-- TMPL_IF NAME=IMG_PRELOAD -->
-      onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD -->')"<!-- /TMPL_IF -->>
+<body <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
+      onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->')"<!-- /TMPL_IF -->>
 
 <!-- TMPL_INCLUDE NAME="bodyheader.html" -->
 
diff -urN bins-1.1.29~/templates.petrus/image.html bins-1.1.29/templates.petrus/image.html
--- bins-1.1.29~/templates.petrus/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.petrus/image.html	2005-11-04 20:31:00.000000000 +0000
@@ -24,6 +24,9 @@
             type="text/javascript"
 	    src="<TMPL_VAR NAME=STATIC_PATH>/joi.js">
     </script>
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
   </head>
 
 <!-- image.html -->
@@ -31,8 +34,8 @@
   <body <TMPL_IF NAME="BG_IMAGE">
         background="<TMPL_VAR NAME="BG_IMAGE">"
       </TMPL_IF>
-      <!-- TMPL_IF NAME=IMG_PRELOAD -->
-        onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD -->')"<!-- /TMPL_IF -->>
+      <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
+        onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->')"<!-- /TMPL_IF -->>
 
     <!-- Menu Title -->
     <TMPL_INCLUDE NAME="title1.html">
diff -urN bins-1.1.29~/templates.satyap/image.html bins-1.1.29/templates.satyap/image.html
--- bins-1.1.29~/templates.satyap/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.satyap/image.html	2005-11-04 20:31:06.000000000 +0000
@@ -1,13 +1,13 @@
 <!-- TMPL_INCLUDE NAME="header.html" -->
 
-    <!-- TMPL_IF NAME=IMG_PRELOAD -->
+    <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
     <!-- preload next image of same size to speed up the album browsing -->
     <script type="text/javascript" language="javascript">
       <!-- hide from non JavaScript Browsers
         function PreloadNextImage() {
 	  nextimg = new Image();
 	  nextimg.src =
-	    "<!-- TMPL_VAR NAME=IMG_PRELOAD -->";
+	    "<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->";
 	}
       // End hiding -->
     </script>
@@ -22,6 +22,9 @@
 	  href="<TMPL_VAR NAME=LAST_IMAGE>"
 	  title="<TMPL_VAR NAME=STRING_LAST>">
     <!-- /TMPL_IF -->
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
     <!-- TMPL_IF NAME="PREV_IMAGE_PAGE" -->
     <link
 	  rel="prev"
@@ -52,8 +55,8 @@
 	  title="<TMPL_VAR NAME=TREE_TITLE>">
 </head>
 
-<body <!-- TMPL_IF NAME=IMG_PRELOAD -->
-      onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD -->')"<!-- /TMPL_IF -->>
+<body <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
+      onload="PreloadNextImage('<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->')"<!-- /TMPL_IF -->>
 
 <!-- TMPL_INCLUDE NAME="bodyheader.html" -->
 
diff -urN bins-1.1.29~/templates.swigs/image.html bins-1.1.29/templates.swigs/image.html
--- bins-1.1.29~/templates.swigs/image.html	2005-11-04 20:22:06.000000000 +0000
+++ bins-1.1.29/templates.swigs/image.html	2005-11-04 20:31:10.000000000 +0000
@@ -8,14 +8,14 @@
 	  content="BINS <TMPL_VAR NAME=BINS_VERSION> (http://bins.sautret.org/)">
     <title><!-- TMPL_VAR NAME=TITLE --></title>
 
-    <!-- TMPL_IF NAME=IMG_PRELOAD -->
+    <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
     <!-- preload next image of same size to speed up the album browsing -->
     <script type="text/javascript" language="javascript">
       <!-- hide from non JavaScript Browsers
         function PreloadNextImage() {
 	  nextimg = new Image();
 	  nextimg.src =
-	    "<!-- TMPL_VAR NAME=IMG_PRELOAD -->";
+	    "<!-- TMPL_VAR NAME=IMG_PRELOAD_SRC -->";
 	}
       // End hiding -->
     </script>
@@ -30,6 +30,9 @@
 	  href="<TMPL_VAR NAME=LAST_IMAGE>"
 	  title="<TMPL_VAR NAME=STRING_LAST>">
     <!-- /TMPL_IF -->
+    <link
+	  rel="next"
+	  href="<TMPL_VAR NAME=IMG_PRELOAD_SRC>">
     <!-- TMPL_IF NAME="PREV_IMAGE_PAGE" -->
     <link
 	  rel="prev"
@@ -65,7 +68,7 @@
 
   <body bgcolor="<TMPL_VAR NAME=PAGE_BACKCOLOR>"
 	vlink="#000000" link="#000000" alink="0000FF"
-    <!-- TMPL_IF NAME=IMG_PRELOAD -->
+    <!-- TMPL_IF NAME=JS_IMG_PRELOAD -->
     onload="PreloadNextImage()"<!-- /TMPL_IF -->>
     <!-- MAIN TABLE (Title, Image, Description)-->
     <table border="0" cellpadding="0" cellspacing="10"


-- 
Martin Michlmayr
http://www.cyrius.com/


More information about the Bins mailing list