From 556fe0e1199c652bfbca538fc948d8517df5a1a7 Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Mon, 21 Oct 2013 23:58:55 -0500
Subject: [PATCH] Allow automatic swapping in of img src from data-src when
 needed.

To allow lazy-loading of any image, add an API method swapInDataSrc that will copy the value from img-tag attribute data-src into src. This allows using a tiny placeholder image in the src, while still allowing preloading of the next image for easy transitions.  Note that this is convention-driven to expect markup like <img src="placeholder.jpg" data-src="realimage.png" />.  Any later DOM manipulation will work _just fine_ because we pull the data-src attribute (and delete it) once.  We could add the ability to specify the swapping attributes and such, but meh.
---
 jquery.cycle2.core.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/jquery.cycle2.core.js b/jquery.cycle2.core.js
index 2ca9602..14080a7 100755
--- a/jquery.cycle2.core.js
+++ b/jquery.cycle2.core.js
@@ -286,6 +286,20 @@ $.fn.cycle.API = {
         }
         return tx;
     },
+    
+    swapInDataSrc: function (opts, slideIndex) {
+        if (slideIndex < opts.slides.length) {
+            var $slideImg = $($(opts.slides[slideIndex]).find("img")[0]);
+
+            if ($slideImg) {
+                var dataSrc = $slideImg.data("src");
+                if (dataSrc) {
+                    $slideImg.attr("src", dataSrc);
+                    $slideImg.data("src", null);    // don't swap it again
+                }
+            }
+        }
+    },
 
     prepareTx: function( manual, fwd ) {
         var opts = this.opts();
@@ -330,6 +344,8 @@ $.fn.cycle.API = {
             if ( tx.before )
                 tx.before( slideOpts, curr, next, fwd );
 
+            opts.API.swapInDataSrc(slideOpts, slideOpts.nextSlide); // ensure the current slide is present
+
             after = function() {
                 opts.busy = false;
                 // #76; bail if slideshow has been destroyed
@@ -338,6 +354,9 @@ $.fn.cycle.API = {
 
                 if (tx.after)
                     tx.after( slideOpts, curr, next, fwd );
+
+                opts.API.swapInDataSrc(slideOpts, slideOpts.nextSlide); // ensure the next slide is present
+
                 opts.API.trigger('cycle-after', [ slideOpts, curr, next, fwd ]);
                 opts.API.queueTransition( slideOpts);
                 opts.API.updateView( true );