[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