Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-04-23

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!

2014-04-23

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.