Lazy Loading in Flexslider

Question

I am trying to get lazy loading working for Flexslider by using Lazy Loading jquery plugin and following the instructions on this site: http://www.appelsiini.net/projects/lazyload

I am loading the plugin script and don't see any errors on console. I tried without the container or options being passed in lazyload function and still nothing. I spend hours on this.

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

Does anyone know how to get lazy loading working in Flexslider?

score 15 · Answer 1 · answered Feb 05 '14 at 21:11

I implemented a lazy load during scrolling. This solution works better for big collections in comparison with other solutions proposed here. During initialization it loads only first 5 images and then it loads ahead 3 images for every animation.

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

and javascript code:

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });

@RomanPodlinov how can i use this concept to ResponsiveSlider ?? — Vikram Anand Bhushan, Oct 01 '14 at 13:27
@Vikram sorry, I didn't work with ResponsiveSlider, but IMO the concept must work too. You just have to bind lazyload on the events from the slider — Roman Podlinov, Oct 01 '14 at 16:34
Still using flexslider in 2020. Great answer, simple concept, works as intended. I think this should be the accepted answer. The accepted answer hints at the same concept, but this answer is complete. — brett, May 18 '20 at 16:58

score 8 · Answer 2 · answered Oct 28 '12 at 17:35

The method works pretty well for me, but the loading image does need to be the same size as the rest of the images. I actually use http://imageresizing.net/ with mode=pad

In the main container that you are using for flexslider, put the actual image in a "data-src" attribute

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

In you initialization function, use the "start" callback to replace the loading image with the actual image, and remove the attribute

$('#slider').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

I hope this helps someone.

It works for me, I make only one improvement instead of adding class="lazy" directly, I search for img with attribute "data-src" $(slider).find("img[data-src]").each(function () ... — Marc Cals, Mar 25 '13 at 21:29

alexandria757 · Answer 3 · 2012-09-17T14:37:37.747

4

I am trying to do the same thing using Flexslider 2 and the Lazy Load Plugin for jQuery.

It seems the container property only works if the element is styled with overflow:scroll;

I was able to get the lazy load to work using this code:

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

However, this just lazy loads everything at once instead of as the flexslider animates.

I was also able to get it to work on mouse over using this code:

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

However this doesn't work on touch devices.

I think the key is to create your own custom event and have it trigger after a flexslider callback such as the after callback.

edited Sep 17 '12 at 14:37

answered Sep 14 '12 at 20:56

alexandria757

81
2

Thanks for the answer but that is what I did. I implemented my our lazy loading logic based on what lazy load library does on after event of flexslider that is triggered after the slide is done. – Encore PTL Sep 18 '12 at 01:05
You lazy load solution doesn't make any sense for big image collections due to it loads ALL images. I proposed better solution below. – Roman Podlinov Feb 05 '14 at 21:14

score 2 · Answer 4 · answered Sep 27 '13 at 19:20

2

For the sake of offering an alternative solution - another option is to use a responsive slider which already has lazy load built into it, for example royal slider, here is the link -> http://dimsemenov.com/plugins/royal-slider/

answered Sep 27 '13 at 19:20

uknowit2

449
1
7
20

score 1 · Answer 5 · answered Aug 05 '13 at 16:54

You might as well initialize lazyload with a custom trigger event ...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

... and then call this event to preload all your images inside the flexslider with a call like:

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');

score 0 · Accepted Answer · answered Sep 19 '12 at 00:58

0

So I added the real image page to the data-attr attribute on the image tag and on after event fire I would find the image with active class and set the img src attribute equal to data-attr value.

answered Sep 19 '12 at 00:58

Encore PTL

8,084
10
43
78

6

Do you have an example? Or could you throw one up in js fiddle? – J0NNY ZER0 Dec 13 '12 at 21:20
As @J0NNYZER0 says, could you put a jsfiddle up of your solution? Thx. – cavill Nov 21 '13 at 17:23

Lazy Loading in Flexslider

6 Answers6

Linked