From 89c709c7d5a4395bcb594ef3e2b9bd5b6734836b Mon Sep 17 00:00:00 2001
From: Lee Powers <lee@powers1.net>
Date: Wed, 4 Apr 2012 18:51:18 -0700
Subject: [PATCH] Refined preloading of images

---
 demo/demo-lazy.html   |  4 +--
 jquery.nivo.slider.js | 58 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/demo/demo-lazy.html b/demo/demo-lazy.html
index 3930127..b272b6d 100644
--- a/demo/demo-lazy.html
+++ b/demo/demo-lazy.html
@@ -39,9 +39,7 @@
     <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
     <script type="text/javascript">
     $(window).load(function() {
-        $('#slider').nivoSlider({
-          pauseTime: 6000
-        });
+        $('#slider').nivoSlider();
     });
     </script>
 </body>
diff --git a/jquery.nivo.slider.js b/jquery.nivo.slider.js
index 6668005..d296ae4 100644
--- a/jquery.nivo.slider.js
+++ b/jquery.nivo.slider.js
@@ -24,12 +24,6 @@
             paused: false,
             stop: false
         };
-        
-        // Parse image source from an element.
-        // Checks in data-src, then in src
-        var parse_src = function(elem) {
-          return elem.data('src') || elem.attr('src');
-        }
     
         //Get this slider
         var slider = $(element);
@@ -68,6 +62,32 @@
             vars.totalSlides++;
         });
         
+        // Parse image source from an element.
+        // Checks in data-src, then in src
+        var parse_src = function(elem) {
+          return elem.data('src') || elem.attr('src');
+        }
+        
+        // Parse out the image URL string at the given child index.
+        // Does no bounds checking!
+        var parse_image = function(idx) {
+          if($(kids[idx]).is('img')) {
+            return $(kids[idx]);
+          } else {
+            return $(kids[idx]).find('img:first');
+          }
+        }
+        
+        // Preload the image in the kids collection at the given step from the current slide
+        var preload_image = function(step) {
+          var nxt = vars.currentSlide + step;
+          if (nxt >= kids.length) nxt = 0
+          else if (nxt < 0) nxt = 0;
+          var img = parse_image(nxt);
+          console.log(nxt, img);
+          $('<img>').attr('src', parse_src(img));
+        }
+        
         //If randomStart
         if(settings.randomStart){
         	settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
@@ -93,6 +113,14 @@
         
         //Set first background
         slider.css('background','url("'+ parse_src(vars.currentImage) +'") no-repeat');
+        
+        // Preload second image to transition into.
+        // Given the first image some time to load!
+        if (!settings.manualAdvance && kids.length > 1) {
+          setTimeout(function() {
+            preload_image(1);
+          }, Math.max(1000, settings.pauseTime - 1000));
+        }
 
         //Create caption
         slider.append(
@@ -245,9 +273,13 @@
             if($(kids[vars.currentSlide]).is('a')){
                 $(kids[vars.currentSlide]).css('display','block');
             }
-            //Restart the timer
-            if(timer == '' && !vars.paused && !settings.manualAdvance){
-                timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
+            if(!vars.paused && !settings.manualAdvance){
+                // Preload the next image (when found)
+                preload_image(1);
+                // Restart the timer
+                if (timer == '' ) {
+                  timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
+                }
             }
             //Trigger the afterChange callback
             settings.afterChange.call(this);
@@ -348,12 +380,8 @@
 			}
 			if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
 			//Set vars.currentImage
-			if($(kids[vars.currentSlide]).is('img')){
-				vars.currentImage = $(kids[vars.currentSlide]);
-			} else {
-				vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
-			}
-			
+                        vars.currentImage = parse_image(vars.currentSlide);
+                        console.log('currentImage', vars.currentSlide, vars.currentImage);
 			//Set active links
 			if(settings.controlNav){
 				$('.nivo-controlNav a', slider).removeClass('active');