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

但是您不希望图片被自动加载＃34;因此您需要在每个{{1}上将src="url"更改为data-src="url"标签，如：

img

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

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

1 个答案: