0

我有一个页面在平板电脑视图及上方并排显示 2 列图像，我使用延迟加载 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>

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

4

2 回答 2

1

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

$("img.lazy").lazyload({effect : "fadeIn", failure_limit: 9999});
于 2018-09-12T13:06:18.487 回答
0

如果您的插件不起作用，请尝试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>

于 2017-01-23T11:58:22.133 回答