CODEWITHSUNDEEP
javascriptjqueryhtmlcarousel
user2252219
user2252219

Reputation: 865

How to lazy load a wrapper div containing a carousel with images?

I have a bunch of carousels each wrapped in .lazy_wrap. I would like to lazy load them to load the site faster. How would I approach this? I've looked at some lazy load plugins but they seem to only work on images. I found a plugin called jquery-lazyloadanything but I can't figure out how to use it.

http://jsfiddle.net/8bJUc/667/

<div class="lazy_wrap">
  <div class="owl-carousel">
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
  </div>
</div>

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
    navigation: true,
    pagination: true
  });
});

Upvotes: 1

Views: 1057

Answers (1)

Gavriel
Gavriel

Reputation: 19237

http://jsfiddle.net/8bJUc/668/

You need to add just this code:

$('img').lazyloadanything({
  'onLoad': function(e, LLobj) {
    var $img = LLobj.$element;
    var src = $img.attr('data-src');
    $img.attr('src', src);
    console.log("loading: ", src);
  }
});

But you don't want the images to get loaded "automatically", so you'll need to change src="url" to data-src="url" on each img tag, like:

<img data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />

You'll also need to add height, width to the images either via the html tag or css, because lazyloadanything only loads them when it detects that they enter the screen but it can only happen when they have a size.

Upvotes: 1

Related Questions