Flexslider lazyload animated gifs. WordPress
- SOLVED
I am having the toughest time getting flexslider to lazyload in a 4 column slider. All my images reload when I hit .flex-next. They are animated gifs so they re-animate. I just want to load the next visible image.
The slider works fine. It just reloads the images.
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
before: function (){
$('.flexslider .slides').removeClass('end');
},
end: function () {
$('.flexslider .slides').addClass('end');
},
after: function (){
$("img.lazy").lazyload({});
}
});
Answers (2)
Hariprasad Vijayan answers:
Hello,
Try this
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
before: function (){
$('.flexslider .slides').removeClass('end');
},
end: function () {
$('.flexslider .slides').addClass('end');
},
after: function(slider) {
var newslide = slider.currentSlide;
$(newslide).find("img").lazyload({});
}
});
Casey Spitnale comments:
Thanks, but this didn't work. http://boost2.lionandpanda.com
Hariprasad Vijayan comments:
let me know what you get when you use following code
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
before: function (){
$('.flexslider .slides').removeClass('end');
},
end: function () {
$('.flexslider .slides').addClass('end');
}
});
Casey Spitnale comments:
Same results. reloads all images.
Hariprasad Vijayan comments:
Hi,
you removed it from one section. you can see one more section in custom.js. Exactly in else part of if ($(window).width() < 500) {. Please check it.
Casey Spitnale comments:
yeah. i was just placing your code above. i put your other code in.
Hariprasad Vijayan comments:
Did you try that? Is it working?
Casey Spitnale comments:
No. Will not load unless scrolled.
Hariprasad Vijayan comments:
Try this code
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
start: function (slider) {
$(slider).find("img.lazy").each(function () {
var src = $(this).attr("data-original");
$(this).attr("src", src).removeAttr("data-original");
});
},
before: function (){
$('.flexslider .slides').removeClass('end');
},
end: function () {
$('.flexslider .slides').addClass('end');
}
});
Casey Spitnale comments:
That is extremely close, it will load all the images but I need to load the next image, not every image in the slider.
Hariprasad Vijayan comments:
Try this code
// Top Slider 4 Columns
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
start: function (slider) {
var i=0;
$(slider).find("img.lazy").each(function () {
if(i<4){
var src = $(this).attr("data-original");
$(this).attr("src", src).removeAttr("data-original");
i++;
}
});
},
before: function (){
$('.flexslider .slides').removeClass('end');
},
end: function () {
$('.flexslider .slides').addClass('end');
},
after: function(slider) {
var slides = slider.slides;
var index = slider.animatingTo;
var newslide = $(slides[index+3]);
$(newslide).find('img.lazy').lazyload({});
var src = $(newslide).find('img.lazy').attr("data-original");
$(newslide).find('img.lazy').attr("src", src).removeAttr("data-original");
}
});
Casey Spitnale comments:
looks great!
Bob answers:
I think you have to change code like these examples.
http://stackoverflow.com/questions/19071907/flexslider-lazyloading-to-only-load-an-image-when-its-truly-needed
http://stackoverflow.com/questions/12360533/lazy-loading-in-flexslider
They set real image path in <strong>data-src</strong> or <strong>data-original</strong> attribute and then load it when <strong>after</strong> event fires.
means initially it image src attribute contain dummy url of loading image.
Not sure but below code might work.
$('#top-slider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 450,
itemMargin: 15,
minItems: 4,
move: 1,
controlNav: false,
slideshow: false,
before: function (){
$('.flexslider .slides').removeClass('end');
},
after: function (slider) {
//instead of going over every single slide, we will just load the next immediate slide
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-original]');
if($img){
$img.attr("src", $img.attr('data-original')).removeAttr("data-original");
}
},
end: function () {
$('.flexslider .slides').addClass('end');
}
});
Casey Spitnale comments:
I see some results in your code but it triggers the image on the left to reload not on the right. http://boost2.lionandpanda.com/
Bob comments:
I am sorry but my internet connection is very slow so I can not help you with that. but you can play with above code and it might work.