is it possible to lazyload thumbnails ?

[colapsnux]

I'm using LazyLoad plugin and I would like if it possible to lazy load the data-thumb image

For information I have this code in my slider:

[li] data-thumb="http://exemple.tld/medias/imgs/slider/thumb/20-thumb.jpg" ]
[img class="lazy" data-original="http://exemple.tld/medias/imgs/slider/20.jpg" width="800" height="356" ]
[/li]

The large image is lazyloaded very well, but it doesn't want to lazyload the thumbnails

I tried to add the lazy class to the LightSlider js script where the img tag is generated and it doesn't work too

[ img class="lazy" src="'+r+'" /]

I would like to do it because I have 40 thumbnails who load when the page is loaded Any advice or solution will be appreciated Thanks in advance

[ronakrathod18]

@sachinchoolur any updates on this?

[cazacugmihai]

Is there a solution for this?

[chromahoen]

Solution#1 is ridiculously simple and I use it in all my sites now. http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/ Why didn't I think of this?

[amiga-500]

Solution#1 is ridiculously simple and I use it in all my sites now. http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/ Why didn't I think of this?

It seems to me you have never used lightslider (this project) because if you did you would realize your answer doesnt help at all. The problem isn't about generically lazy loading an image (we all know how to do that), the question is how to lazy load within the lightslider gallery.

But it seems clear the author has abandoned this project.

[IncubuzzCC]

I am probably late to the party, and it seems the author has abandoned this project; but it still is a great plugin, considering there are very recent pull requests.

There is an easy solution for lazy loading the thumbnails based on browser-level lazy-loading. I would like to share it here as I was looking for a solution, and was unable to find one.

Change the line 358 from:

pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><a href="#"><img src="' + thumb + '" /></a></li>';

to:

pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><a href="#"><img loading="' + settings.loading + '" src="' + thumb + '" /></a></li>';

Then add the line

loading: 'auto',

to the defaults(about line 39).

Now you will be able to configure your thumbnail behaviour using the loading attribute with one of 3 settings: auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute. lazy: Defer loading of the resource until it reaches a calculated distance from the viewport. eager: Load the resource immediately, regardless of where it's located on the page.

All you have to do is add the loading attribute to the slide too:

<ul id="imageGallery">
  <li data-thumb="img/thumb/cS-1.jpg" data-src="img/largeImage.jpg">
    <img loading="lazy" src="img/cS-1.jpg" />
  </li>
  <li data-thumb="img/thumb/cS-2.jpg" data-src="img/largeImage1.jpg">
    <img loading="lazy" src="img/cS-2.jpg" />
  </li>
</ul>

$(document).ready(function() {
  $('#imageGallery').lightSlider({
      gallery:true,
      item:1,
      loop:true,
      thumbItem:9,
      slideMargin:0,
      enableDrag: false,
      currentPagerPosition:'left',
      loading:'lazy',
      onSliderLoad: function(el) {
          el.lightGallery({
              selector: '#imageGallery .lslide'
          });
      }   
  });  
});

I hope it helps someone.

[ricknica]

Thanks @IncubuzzCC. That worked! Appreciate it.