Flexloader is a lazyloading solution for Flexslider
Add to project
bower install flexloader
To configure, add $.flexloader to the start and after events in Flexslider init.
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider);
},
after: function(slider) {
$.flexloader(slider);
}
});
Default: load HTML markup following the Flexslider convention of li > img
<div class="flexslider">
<ul class="slides">
<li class="slide slide-16 clone">
<img src="img/1x1.gif" data-original="img/slideshow/16.jpg">
</li>
<li class="slide slide-01">
<img src="img/1x1.gif" data-original="img/slideshow/01.jpg">
</li>
<li class="slide slide-02">
<img src="img/1x1.gif" data-original="img/slideshow/02.jpg">
</li>
<li class="slide slide-03">
<img src="img/1x1.gif" data-original="img/slideshow/03.jpg">
</li>
<li class="slide slide-04">
<img src="img/1x1.gif" data-original="img/slideshow/04.jpg">
</li>
...
<li>
<img src="img/1x1.gif" data-original="img/slideshow/16.jpg">
</li>
<li class="slide slide-01 clone">
<img src="img/1x1.gif" data-original="img/slideshow/01.jpg">
</li>
</ul>
</div>
On Flexslider start, Flexloader will update the img src of Slides 1, c1, 2, 16, & c16 ("c" prefix indicates cloned slide).
When the next slide is animated to, Flexloader will update the img src of Slide 3. Slides 1, c1, & 2 are already loaded and will not updated.
Two options: Picturefill and Background-Images
Picturefill JS
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'picturefill': true });
},
after: function(slider) {
$.flexloader(slider, { 'picturefill': true });
}
});
Picturefill HTML
<div class="flexslider">
<ul class="slides">
<li>
<span data-picture data-alt="Description here...">
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/540/grey01.jpg">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/540/grey01.jpg"
data-media="(max-width: 540px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/720/grey01.jpg"
data-media="(min-width: 541px) and (max-width: 720px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/900/grey01.jpg"
data-media="(min-width: 721px) and (max-width: 900px)">
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/1080/grey01.jpg"
data-media="(min-width: 901px)">
</span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img
src="img/slideshow_flexloader_picturefill/540/grey01.jpg"
alt="Description here...">
</noscript>
</span>
</li>
...
</ul>
</div>
Background-Images JS
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'background_images': true });
},
after: function(slider) {
$.flexloader(slider, { 'background_images': true });
}
});
Background-Images HTML
<div class="flexslider">
<ul class="slides">
<li class="slide slide-01"></li>
...
<li class="slide slide-16"></li>
</ul>
</div>
Background-Images CSS
.slide {
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-bottom: 50%;
}
@media (max-width: 540px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/540/grey01.jpg');
}
}
@media (min-width: 541px) and (max-width: 720px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/720/grey01.jpg');
}
}
@media (min-width: 721px) and (max-width: 900px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/900/grey01.jpg');
}
}
@media (min-width: 901px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/1080/grey01.jpg');
}
}
Background-Images - Add Custom Images Loaded Class
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'background_images': true, 'class_name': 'your-class-name' });
},
after: function(slider) {
$.flexloader(slider, { 'background_images': true, 'class_name': 'your-class-name' });
}
});
Background-Images - Default Class: 'flexloader-background-image-loaded'
In CSS below, class name has be changed to 'your-class-name'
.slide {
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-bottom: 50%;
}
@media (max-width: 540px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/540/grey01.jpg');
}
}
@media (min-width: 541px) and (max-width: 720px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/720/grey01.jpg');
}
}
@media (min-width: 721px) and (max-width: 900px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/900/grey01.jpg');
}
}
@media (min-width: 901px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/1080/grey01.jpg');
}
}
Background Images - Preload Slide 1
Preloading the first slide improves performance by starting the image download earlier
<div class="flexslider">
<ul class="slides">
<li class="slide slide-01 flexloader-background-image-loaded"></li>
<li class="slide slide-02"></li>
<li class="slide slide-03"></li>
...
<li class="slide slide-16"></li>
</ul>
</div>
Demo: Flexslider Slideshow (no Flexloader)
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/slideshow/1080/grey01.jpg"
</li>
...
<li>
<img src="img/slideshow/1080/grey16.jpg"
</li>
</ul>
</div>
$('#flexloader-demo-1-slideshow').flexslider({
namespace: "flexloader-demo-1-",
animation: "slide",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 300
});
Demo: Flexslider Slideshow + Flexloader
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1x1.gif" data-original="img/slideshow_flexloader/1080/grey01.jpg">
</li>
...
<li>
<img src="img/1x1.gif" data-original="img/slideshow_flexloader/1080/grey16.jpg">
</li>
</ul>
</div>
$('#flexloader-demo-2-slideshow').flexslider({
namespace: "flexloader-demo-2-",
animation: "slide",
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 300,
start: function(slider) {
$.flexloader(slider);
},
after: function(slider) {
$.flexloader(slider);
}
});
Demo: Flexslider Slideshow + Flexloader & Picturefill
<div class="flexslider">
<ul class="slides">
<li>
<span data-picture>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/540/grey01.jpg"
data-media="(max-width: 540px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/720/grey01.jpg"
data-media="(min-width: 541px) and (max-width: 720px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/900/grey01.jpg"
data-media="(min-width: 721px) and (max-width: 900px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/1080/grey01.jpg"
data-media="(min-width: 901px)">
</span>
</span>
</li>
...
<li>
<span data-picture>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/540/grey16.jpg"
data-media="(max-width: 540px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/720/grey16.jpg"
data-media="(min-width: 541px) and (max-width: 720px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/900/grey16.jpg"
data-media="(min-width: 721px) and (max-width: 900px)">
</span>
<span
data-src="img/1x1.gif"
data-original="img/slideshow_flexloader_picturefill/1080/grey16.jpg"
data-media="(min-width: 901px)">
</span>
</span>
</li>
</ul>
</div>
$('#flexloader-demo-3-slideshow').flexslider({
namespace: "flexloader-demo-3-",
animation: "slide",
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 300,
start: function(slider) {
$.flexloader(slider, { 'picturefill': true });
},
after: function(slider) {
$.flexloader(slider, { 'picturefill': true });
}
});
Demo: Flexslider Carousel
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/carousel/270/grey01.jpg"
</li>
...
<li>
<img src="img/carousel/270/grey16.jpg"
</li>
</ul>
</div>
$('#flexloader-demo-4-carousel').flexslider({
namespace: "flexloader-demo-4-",
animation: "slide",
controlNav: false,
itemWidth: 270,
itemMargin: 0,
minItems: 4,
maxItems: 4,
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 600,
animationLoop: false,
move: 2
});
Demo: Flexslider Carousel + Flexloader
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/carousel_flexloader/270/grey01.jpg"
</li>
...
<li>
<img src="img/carousel_flexloader/270/grey16.jpg"
</li>
</ul>
</div>
$('#flexloader-demo-5-carousel').flexslider({
namespace: "flexloader-demo-5-",
animation: "slide",
controlNav: false,
itemWidth: 270,
itemMargin: 0,
minItems: 4,
maxItems: 4,
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 600,
animationLoop: false,
move: 2,
start: function(slider) {
$.flexloader(slider);
},
after: function(slider) {
$.flexloader(slider);
}
});
Demo: Flexslider Carousel + Flexloader & Picturefill
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/carousel_flexloader_picturefill/270/grey01.jpg"
</li>
...
<li>
<img src="img/carousel_flexloader_picturefill/270/grey16.jpg"
</li>
</ul>
</div>
$('#flexloader-demo-6-carousel').flexslider({
namespace: "flexloader-demo-6-",
animation: "slide",
controlNav: false,
itemWidth: 270,
itemMargin: 0,
minItems: 4,
maxItems: 4,
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 600,
animationLoop: false,
move: 2,
start: function(slider) {
$.flexloader(slider, { 'picturefill': true });
},
after: function(slider) {
$.flexloader(slider, { 'picturefill': true });
}
});
Demo: Flexslider Slideshow - Background Images
<div class="flexslider">
<ul class="slides">
<li class="slide"></li>
...
<li class="slide"></li>
</ul>
</div>
$('#flexloader-demo-7-slideshow').flexslider({
namespace: "flexloader-demo-7-",
animation: "slide",
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 300,
start: function(slider) {
$.flexloader(slider, { 'background_images': true });
},
after: function(slider) {
$.flexloader(slider, { 'background_images': true });
}
});
Demo: Flexslider Slideshow - Background Images + Preload Slide 1 & Custom Class Name
<div class="flexslider">
<ul class="slides">
<li class="slide slide-01 flexloader-custom-class-background-image-loaded"></li>
<li class="slide slide-02"></li>
<li class="slide slide-03"></li>
...
<li class="slide slide-16"></li>
</ul>
</div>
$('#flexloader-demo-8-slideshow').flexslider({
namespace: "flexloader-demo-8-",
animation: "slide",
prevText: "prev",
nextText: "next",
keyboard: false,
slideshowSpeed: 100000,
animationSpeed: 300,
start: function(slider) {
$.flexloader(slider, {
'background_images': true,
'class_name': 'flexloader-custom-class-background-image-loaded'
});
},
after: function(slider) {
$.flexloader(slider, {
'background_images': true,
'class_name': 'flexloader-custom-class-background-image-loaded'
});
}
});
.flexloader-demo-8-slide {
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-bottom: 50%;
}
@media (max-width: 540px) {
.flexloader-demo-8-slide-01.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/540/grey01.jpg');
}
...
.flexloader-demo-8-slide-16.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/540/grey16.jpg');
}
}
@media (min-width: 541px) and (max-width: 720px) {
.flexloader-demo-8-slide-01.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/720/grey01.jpg');
}
...
.flexloader-demo-8-slide-16.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/720/grey16.jpg');
}
}
@media (min-width: 721px) and (max-width: 900px) {
.flexloader-demo-8-slide-01.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/900/grey01.jpg');
}
...
.flexloader-demo-8-slide-16.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/900/grey16.jpg');
}
}
@media (min-width: 901px) {
.flexloader-demo-8-slide-01.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/1080/grey01.jpg');
}
...
.flexloader-demo-8-slide-16.flexloader-custom-class-background-image-loaded {
background-image: url('../img/slideshow_background_images_custom_class/1080/grey16.jpg');
}
}