如何延遲垂直和水平加載圖像？

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

我建議您嘗試使用lazySizes 。 與其他lazyloader的最大區別在於，lazySizes無需配置即可自動檢測可見性更改。

這可以使關注點分離，因為如果您更改CSS並添加滾動容器或在大型菜單內添加圖像，則無需觸摸JS lazyloader配置。

您需要做的所有事情就是添加lazysizes腳本並使用data-src而不是src並添加類lazyload 。

Answer 2

添加此選項還可將延遲加載分配給#hcontainer中沒有的#hcontainer

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

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

編輯：

演示