jquery lazyload 2列图像仅在左侧工作

Question

我有一个页面在平板电脑视图和上面并排显示2列图像，我使用lazyload jquery，问题是当我滚动时，它只延迟左列图像和右侧列显示所有图像后我滚动浏览所有部分图像。

这里的代码如下：

<div class="row">
  <div class="col-sm-6">
    <!-- image section left side -->
    <img class="lazy" data-original="img1.jpg"> <!-- show up when screen stop here -->
    <img class="lazy" data-original="img2.jpg"> <!-- show up when screen stop here -->
  </div>
  <div class="col-sm-6">
    <!-- image section right side -->
    <img class="lazy" data-original="img3.jpg"> <!-- not shown when screen stop here (also screen stop on img1.jpg) -->
    <img class="lazy" data-original="img4.jpg"> <!-- shown because the end of image section, and also showing img3.jpg all at once -->
  </div>
</div>

我使用宽度和高度，但仍然无法正常工作

Answer 1

如果您的插件不起作用，请尝试Lazy！ ;） 我没有看到多列有任何问题......

$(".lazy").lazy();

.row {
  width: 200px;
}
.col-sm-6 {
  width: 50%;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <img class="lazy" data-src="https://dummyimage.com/100x100/000/fff&text=1">
    <img class="lazy" data-src="https://dummyimage.com/100x100/000/fff&text=2">
  </div>
  <div class="col-sm-6">
    <img class="lazy" data-src="https://dummyimage.com/100x100/000/fff&text=3">
    <img class="lazy" data-src="https://dummyimage.com/100x100/000/fff&text=4">
  </div>
</div>

Answer 2

将failure_limit参数设置为9999.它正在工作。

$("img.lazy").lazyload({effect : "fadeIn", failure_limit: 9999});