Adding lazy loading

README.markdown

@@ -26,6 +26,7 @@ easing | string |  'linear' | animate() fallback easing
 fade | boolean | false | Enables fade
 arrows | boolean | true | Enable Next/Prev arrows
 infinite | boolean | true | Infinite looping
+lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique
 onBeforeChange(this, index) | method | null | Before slide change callback
 onAfterChange(this, index) | method | null | After slide change callback
 pauseOnHover | boolean | true | Pauses autoplay on hover

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "slick-carousel",
   "main": "js/slick.js",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "homepage": "https://github.com/kenwheeler/slick",
   "authors": [
     "Ken Wheeler <ken_wheeler@me.com>"

css/style.css

@@ -25,6 +25,7 @@
 .red{background:#e74c3c;color:#fff;}
 .slick-slide .image{padding:10px;}
 .slick-slide img{border:5px solid #FFF;display:block;width:100%;}
+.slick-slide img.slick-loading{border:0 }
 .slick-slider{margin:30px auto 50px;}
 .subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;}
 .white{background:#fff;color:#3498db;}
@@ -47,8 +48,8 @@ td{background:#3498db;border:1px solid #fff;color:#fff;padding:10px;width:33%; v
 th{border-left:1px solid #3498db;padding:10px;}
 td:first-child { font-weight: bold;}
 th.last{width: 230px;}
-th.type {width: 100px;}
-th.default { width: 75px; }
+th.type {width: 80px;}
+th.default { width: 100px; }
 th:first-child{border-left:0;}
 thead{background:#fff;border-color:#3498db;color:#3498db;}
 tr{background:#fff;border-right:1px solid #fff;}
@@ -75,7 +76,7 @@ tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px
 thead { display: none; }
 td { border: 0; padding: 10px 0px;}
 td,tbody { display: block; width: 100% !important;}
-table.settings td:nth-of-type(1){font-weight: bold; font-size: 16px; line-height: 18px;}
+table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: bold; font-size: 16px; line-height: 18px;}
 table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: bold;}
 table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: bold;}
 table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: bold;}

index.html

@@ -215,6 +215,28 @@ <h2>Center Mode</h2>
       }
     }
   ]
+});
+				</code></pre>
+				<hr/>
+				<h2>Lazy Loading</h2>
+				<div class="slider lazy">
+					<div><div class="image"><img data-lazy="img/lazyfonz1.png"/></div></div>
+					<div><div class="image"><img data-lazy="img/lazyfonz2.png"/></div></div>
+					<div><div class="image"><img data-lazy="img/lazyfonz3.png"/></div></div>
+					<div><div class="image"><img data-lazy="img/lazyfonz4.png"/></div></div>
+					<div><div class="image"><img data-lazy="img/lazyfonz5.png"/></div></div>
+					<div><div class="image"><img data-lazy="img/lazyfonz6.png"/></div></div>
+				</div>
+				<pre><code>
+// To use lazy loading, set a data-lazy attribute
+// on your img tags and leave off the src
+
+&lt;img data-lazy="img/lazyfonz1.png"/&gt;
+
+$('.lazy').slick({
+  lazyLoad: 'ondemand',
+  slidesToShow: 3,
+  slidesToScroll: 1
 });
 				</code></pre>
 				<hr/>
@@ -446,6 +468,12 @@ <h2 >Settings</h2>
 							<td>true</td>
 							<td>Infinite loop sliding</td>
 						</tr>
+						<tr>
+							<td>lazyLoad</td>
+							<td>string</td>
+							<td>'ondemand'</td>
+							<td>Set lazy loading technique. Accepts 'ondemand' or 'progressive'.</td>
+						</tr>
 						<tr>
 							<td>onBeforeChange</td>
 							<td>function</td>

js/scripts.js

@@ -87,14 +87,18 @@ $(document).ready(function(){
       }
     ]
   });
-
+  $('.lazy').slick({
+    lazyLoad: 'ondemand',
+    slidesToShow: 3,
+    slidesToScroll: 1
+  });
   $('.autoplay').slick({
     dots: true,
     infinite: true,
     speed: 300,
     slidesToShow: 3,
     slidesToScroll: 1,
-    autoplay: true,
+    autoplay: false,
     autoplaySpeed: 2000
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-carousel",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "the last carousel you'll ever need",
   "main": "js/slick.js",
   "scripts": {

slick.jquery.json

@@ -9,7 +9,7 @@
         "touch",
         "mobile"
     ],
-    "version": "1.3.2",
+    "version": "1.3.3",
     "author": {
         "name": "Ken Wheeler",
         "url": "http://kenwheeler.github.io"

slick/slick.css

@@ -1,5 +1,5 @@
 /* Slider */
-.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
+.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
 
 .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
 .slick-list:focus { outline: none; }
@@ -15,7 +15,7 @@
 
 .slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
 .slick-slide img { display: block; }
-.slick-slide.loading { background: url(./ajax-loader.gif) center center no-repeat; position: relative; }
+.slick-slide img.slick-loading { background: white url(./ajax-loader.gif) center center no-repeat; padding-bottom: 100%; }
 .slick-slide.dragging img { pointer-events: none; }
 .slick-initialized .slick-slide { display: block; }
 .slick-loading .slick-slide { visibility: hidden; }

slick/slick.js

@@ -36,17 +36,18 @@
 
             _.defaults = {
                 accessibility: true,
+                arrows: true,
                 autoplay: false,
                 autoplaySpeed: 3000,
                 centerMode: false,
                 centerPadding: 50,
                 cssEase: 'ease',
                 dots: false,
                 draggable: true,
-                fade: false,
                 easing: 'linear',
-                arrows: true,
+                fade: false,
                 infinite: true,
+                lazyLoad: 'ondemand',
                 onBeforeChange: null,
                 onAfterChange: null,
                 pauseOnHover: true,
@@ -165,7 +166,7 @@
         if (typeof(index) === "number") {
             if (index === 0 && $(slideTrackChildren).length === 0) {
                 $(markup).appendTo(_.slideTrack);
-            } else if (index < 0 || (index >= $(slideTrackChildren).length && $(slideTrackChildren).length != 0) ) {
+            } else if (index < 0 || (index >= $(slideTrackChildren).length && $(slideTrackChildren).length !== 0) ) {
                 _.reinit();
                 return false;
             } else if (addBefore) {
@@ -440,6 +441,8 @@
             }
         }
 
+        $('img[data-lazy]',_.slider).not('[src]').addClass('slick-loading');
+
         _.setupPlaceholders();
 
         _.setupInfinite();
@@ -779,6 +782,38 @@
 
     };
 
+    Slick.prototype.lazyLoad = function (){
+
+        var _ = this, loadRange, cloneRange, rangeStart, rangeEnd;
+
+        if (_.options.centerMode === true) {
+            rangeStart = _.options.slidesToShow + _.currentSlide - 1;
+            rangeEnd = rangeStart + _.options.slidesToShow + 2;
+        } else {
+            rangeStart = _.options.slidesToShow + _.currentSlide;
+            rangeEnd = rangeStart + _.options.slidesToShow;
+        }
+
+        loadRange = _.slider.find('.slick-slide').slice(rangeStart,rangeEnd);
+
+        $('img[data-lazy]',loadRange).not('[src]').each(function(){
+            $(this).attr('src', $(this).attr('data-lazy')).removeClass('slick-loading');
+        });
+
+        if (_.currentSlide >= _.slideCount - _.options.slidesToShow) {
+            cloneRange = _.slider.find('.slick-cloned').slice(0,_.options.slidesToShow);
+            $('img[data-lazy]',cloneRange).not('[src]').each(function(){
+                $(this).attr('src', $(this).attr('data-lazy')).removeClass('slick-loading');
+            });
+        } else if (_.currentSlide === 0) {
+            cloneRange = _.slider.find('.slick-cloned').slice(_.options.slidesToShow * -1);
+            $('img[data-lazy]',cloneRange).not('[src]').each(function(){
+                $(this).attr('src', $(this).attr('data-lazy')).removeClass('slick-loading');
+            });
+        }
+
+    };
+
     Slick.prototype.loadSlider = function () {
 
         var _ = this;
@@ -797,6 +832,10 @@
 
                 _.initUI();
 
+                if (_.options.lazyLoad === 'progressive') {
+                    _.progressiveLazyLoad();
+                }
+
             });
 
         } else {
@@ -805,6 +844,10 @@
 
             _.initUI();
 
+            if (_.options.lazyLoad === 'progressive') {
+                _.progressiveLazyLoad();
+            }
+
         }
 
     };
@@ -837,6 +880,21 @@
 
     };
 
+    Slick.prototype.progressiveLazyLoad = function () {
+
+        var _ = this, imgCount, targetImage;
+
+        imgCount = $('img[data-lazy]').not('[src]').length;
+
+        if(imgCount > 0) {
+            targetImage = $($('img[data-lazy]', _.slider).not('[src]').get(0));
+            targetImage.attr('src', targetImage.attr('data-lazy')).removeClass('slick-loading').load(function(){
+                _.progressiveLazyLoad();
+            });
+        }
+
+    };
+
     Slick.prototype.refresh = function () {
 
         var _ = this;
@@ -1091,17 +1149,17 @@
         var _ = this, centerOffset, allSlides, indexOffset;
 
         _.slider.find('.slick-slide').removeClass('slick-active').removeClass('slick-center');
+        allSlides = _.slider.find('.slick-slide');
 
         if (_.options.centerMode === true) {
 
-            allSlides = _.slider.find('.slick-slide');
             centerOffset = Math.floor(_.options.slidesToShow / 2);
 
             if(index >= centerOffset && index <= (_.slideCount - 1) -  centerOffset) {
                 _.slides.slice(index - centerOffset, index + centerOffset + 1).addClass('slick-active');
             } else {
                 indexOffset = _.options.slidesToShow + index;
-                allSlides.slice(indexOffset - centerOffset, indexOffset + centerOffset + 1).addClass('slick-active');
+                allSlides.slice(indexOffset - centerOffset + 1, indexOffset + centerOffset + 2).addClass('slick-active');
             }
 
             if(index === 0) {
@@ -1113,8 +1171,18 @@
             $(_.slides.get(index)).addClass('slick-center');
 
         } else {
-           _.slides.slice(index, index + _.options.slidesToShow).addClass('slick-active');
 
+            if(index > 0 && index < (_.slideCount - _.options.slidesToShow)) {
+                _.slides.slice(index, index + _.options.slidesToShow).addClass('slick-active');
+            } else {
+                indexOffset = _.options.slidesToShow + index;
+                allSlides.slice(indexOffset, indexOffset + _.options.slidesToShow).addClass('slick-active');
+            }
+
+        }
+
+        if (_.options.lazyLoad === 'ondemand') {
+            _.lazyLoad();
         }
 
     };

slick/slick.scss

@@ -72,15 +72,14 @@
     min-height: 1px;
     img {
         display: block;
+        &.slick-loading {
+            background: white url(./ajax-loader.gif) center center no-repeat;
+            padding-bottom: 100%;
+        }
     }
 
     display: none;
 
-    &.loading {
-        background: url(./ajax-loader.gif) center center no-repeat;
-        position: relative;
-    }
-
     &.dragging img {
         pointer-events: none;
     }