issue112, enhanced preload functions for photo-index

Signed-off-by: Andreas Unterkircher <unki@netshadow.at>

diff --git a/phpfspot.js b/phpfspot.js
index 89eacbadfcda5c3672704a4262628fbe1e00c0c0..f9f970324bac324d8d24952cae1d2bccbf01a79a 100644 (file)
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -427,23 +427,32 @@ function WSR_getElementsByClassName(oElm, strTagName, oClassNames){
 }
 
 
-function preloadPhotos(lbImg) {
+function preloadPhotos(image_url) {
 
-   var d=document;
-   if(d.images)
-      if(!d.photos)
-         d.photos=new Array();
-
-   var i, j=d.photos.length;
+   var i;
+   var timeout = 1000;
+   var waiting = 100;
+   var counting;
 
    lbImg=WSR_getElementsByClassName(document,"img","thumb");
    for(i=0;i<lbImg.length;i++){
-      d.photos[j]=new Image;
-      d.photos[j].src=lbImg[i].src;
-      j++;
+      lbImg[i].src=image_url[i];
+      // to not bomb the server with requests, give the page some time
+      // to load the images one by one. if a image exceeds the timeout,
+      // the next image will be loaded.
+      if(lbImg[i].complete != undefined && lbImg[i].complete != true) {
+         counting = 0;
+         while(lbImg[i].complete != true && counting < timeout) {
+            window.setTimeout("noop()", waiting);
+            counting+=waiting;
+         }
+      }
    }
 }
 
+/* a function that does nothing */
+function noop() {}
+
 function startSlideShow()
 {
    if(!sliding) {

diff --git a/themes/default/templates/photo_index.tpl b/themes/default/templates/photo_index.tpl
index 1a1a18856ecb64129add77f4fcc5f52f5835373f..bf235d3a0152487913e3272651300fc87a3dff06 100644 (file)
--- a/themes/default/templates/photo_index.tpl
+++ b/themes/default/templates/photo_index.tpl
@@ -50,7 +50,7 @@
 
    <div class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');" style="width: { $thumb_container_width }px; height: { $thumb_container_height }px;">
     <a href="javascript:showImage({$images[thumb]}, 'scrollup');" id="thumblink{$images[thumb]}" name="image{$img_id[thumb]}" class="thumblink" onclick="click(this);" title="{$img_title[thumb]}">
-     <img class="thumb" id="thumbimg{$images[thumb]}" src="phpfspot_img.php?idx={$images[thumb]}&amp;width={$width}" alt="thumb_{$images[thumb]}" width="{$img_width[thumb]}" height="{$img_height[thumb]}" />
+     <img class="thumb" id="thumbimg{$images[thumb]}" width="{$img_width[thumb]}" height="{$img_height[thumb]}" />
      <br />
     {$img_name[thumb]}
     </a>
@@ -101,9 +101,20 @@
  </div>
 </div>
 <br class="clearboth" />
-<script type="text/javascript">
+<script type="text/javascript" language="JavaScript">
 <!--
-   preloadPhotos();
+   { counter start=-1 }
+
+   var current;
+   var image_urls = new Array();
+
+   {section name="thumb" loop=$thumbs step=1}
+      {if $images[thumb] }
+         image_urls[{counter}] = 'phpfspot_img.php?idx={$images[thumb]}&width={$width}';
+      {/if}
+   {/section}
+
+   preloadPhotos(image_urls);
 -->
 </script>
 <!-- /Photo Index -->