Make Flexslider 2 lazy load images
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi! I have multiple flexslider 2 sliders on my portfolio site ( It take a while to load all the pics so I need to make the sliders load the images with lazyload or some other loader plugin.

awarded to iBat

Crowdsource coding tasks.

4 Solutions

Just add placeholder with loading.gif for sliders. Other way, it's really simple to load first picture by lazyload, and when sliders loads, change it.

If you know that , you are going to load a fixed size images (width X height)

you have a wrapper div called flexslider which doesn't have any fixed height, for a good reason.

a) But if you want user to believe that there is going to some content. give wrapper some height and have a loading gif in place of that.

lazy loading is where you want to take benefit of content which is below the view port and load them as user's scroll..

you need to have an option to pre-load the image. or show the slider when the images is available.

so loading a gif at center o the div would be suffice.

Hope i understood your problem..

some preloading logic you can use..

$(window).bind('load', function(){
var preload = [

$(document.createElement('img')).bind('load', function(){
if(preload[0]) this.src = preload.shift();


Winning solution


1. Add class "sliderImageWrapper" to <li> elements in slider.

2. Set "src" attribute of each image to any small image (or m.b. leave it empty if it works).

3. Put this code

$(function() {
$.each(".sliderImageWrapper", function(index, wrapper) {
var img = $("<img />").attr("src", "images/projects/calender/" + index + ".jpg")
.load(function() {
if(!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
// remove holder image node
//append new

Hi! doesent work :( How does it know what image to load and where?
Lipovskoy over 7 years ago
Any errors in JS console?
iBat over 7 years ago
it only shows the default image.
Lipovskoy over 7 years ago - By default first image on all slides
iBat over 7 years ago - little update that addresses "clone" class on slides
iBat over 7 years ago - final result. Addresses all flexslider features. - one more with no images at start.
iBat 7 years ago
Hi. I get an error Uncaught SyntaxError: Unexpected token ILLEGAL. How do i make the other sliders show the other images?
Lipovskoy 7 years ago
oki, had to retype the )}; on the end. The images show now only on one slider, how do I make it work on the other ones?
Lipovskoy 7 years ago
I need to see it to understand what the problem is. Do you create empty li node for each image?
iBat 7 years ago
Hi every project has a slider with images that are located in their own folders. så project 1 has, project 2 has etc.
Lipovskoy 7 years ago - I hope this is what you need
iBat 7 years ago
Great! Works fine!
Lipovskoy 7 years ago

Here is another solution to the lazyload with instruction to install

View Timeline