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 (www.lipovskoy.com) 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 = [
'/images/assets/file/1.gif',
'/images/assets/file/2.gif',
'/images/assets/file/3.gif'
];

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

});

Winning solution

Hi.

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
$(wrapper).empty();
//append new
$(wrapper).append(img);
}
});
});
});

Hi! doesent work :( How does it know what image to load and where?
Lipovskoy almost 7 years ago
Any errors in JS console?
iBat almost 7 years ago
it only shows the default image.
Lipovskoy almost 7 years ago
http://jsfiddle.net/aX9WS/2/ - By default first image on all slides
iBat almost 7 years ago
http://jsfiddle.net/aX9WS/3/ - little update that addresses "clone" class on slides
iBat almost 7 years ago
http://jsfiddle.net/aX9WS/6/ - final result. Addresses all flexslider features. http://jsfiddle.net/aX9WS/7/ - one more with no images at start.
iBat almost 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 almost 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 almost 7 years ago
I need to see it to understand what the problem is. Do you create empty li node for each image?
iBat almost 7 years ago
Hi every project has a slider with images that are located in their own folders. så project 1 has http://www.lipovskoy.com/images/projects/peugeotcykel/, project 2 has http://www.lipovskoy.com/images/projects/calender/ etc.
Lipovskoy almost 7 years ago
http://jsfiddle.net/aX9WS/8/ - I hope this is what you need
iBat almost 7 years ago
Great! Works fine!
Lipovskoy almost 7 years ago

Here is another solution to the lazyload
http://www.infinite-scroll.com/ with instruction to install

View Timeline