如何延迟加载包含带有图像的轮播的包装器 div？

Question

我有一堆旋转木马，每个旋转木马都包裹在 .lazy_wrap 中。我想延迟加载它们以更快地加载网站。我将如何处理这个？我看过一些延迟加载插件，但它们似乎只适用于图像。我找到了一个名为 jquery-lazyloadanything 的插件，但我不知道如何使用它。

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
  });
});

Answer 1

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

您只需添加以下代码：

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

但是您不希望加载图像 "automatically"，因此您需要将每个 img 标签上的 src="url" 更改为 data-src="url"，例如:

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

您还需要通过 html 标签或 css 为图像添加高度和宽度，因为 lazyloadanything 仅在检测到它们进入屏幕时才加载它们，但它可以只有当它们有尺寸时才会发生。

如何延迟加载包含带有图像的轮播的包装器 div？

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

html

javascript

jquery

carousel