如何垂直延迟加载图像＆amp;水平？

Question

我的网站有一个图像网格，有水平和垂直滚动。我想首先加载垂直位置的图像，然后加载水平图像，所有这些都是懒惰的。

换句话说，当用户向下滚动时，垂直图像应该延迟加载，当用户水平滚动图像时，水平图像应该懒得加载。我尝试使用lazyload，但是我无法使用它来处理垂直和水平图像容器。

一次只能进行水平或垂直滚动​​。我希望他们两个都能工作！

我的测试代码如下，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
 $("img.lazy").lazyload({
effect : "fadeIn",
container: $("#hcontainer")
});
});
  </script>

<style type="text/css">
#hcontainer {
    height: 800px;
    overflow: scroll;
}
#inner_container {
      width: 4750px;
    }
</style>

<div id="vcontainer">
<div id="hcontainer">
    <div id="inner_container">
          <img class="lazy" data-original="1.jpg" width="765" height="574" alt="BMW M1 Hood">
          <img class="lazy" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side">
          <img class="lazy" data-original="3.jpg" width="765" height="574" alt="Viper 1">
          <img class="lazy" data-original="4.jpg" width="765" height="574" alt="Viper Corner">
          <img class="lazy" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT">
          <img class="lazy" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop">
        </div>
</div>
<br/>
        <img class="lazy img-responsive" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="3.jpg" width="765" height="574" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="4.jpg" width="765" height="574" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
</div>

它不能像我希望的那样工作。任何人都可以帮我吗？

请参阅下面的图片了解输出，我还需要懒惰地加载垂直图像，这是不会发生的。

Answer 1

我建议您尝试http://archive.is/v77rz。与其他lazyloader的最大区别在于，lazySizes自动检测可见性更改而无需配置。

这允许分离关注点，因为您不需要触摸JS lazyloader配置，以防您更改CSS并添加滚动容器或在大型菜单中添加图像等。

您需要做的就是添加lazysizes脚本并使用data-src代替src并添加类lazyload。

Answer 2

添加此项以将lazyload分配给不在#hcontainer

中的图像

 $(function() {
    $(":not(#hcontainer) img.lazy").lazyload({
        effect: "fadeIn"
    });

    $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#hcontainer")
     });
});

编辑：

<强> Demo