如何延迟加载垂直图像&水平？ [英] How to lazy load images vertically & horizontally?

问题描述

我的网站有一个图片网格，它有横向和纵向滚动。我想先加载垂直放置图像，然后放置水平图像，所有这些都是懒惰的。换句话说，当用户向下滚动垂直图像应该加载懒惰，并且当用户滚动水平图像时，水平图像应该加载懒惰。我尝试过使用

解决方案

不在 #hcontainer中的图像

  $（function（） lazyload（{
 effect：fadeIn
}）; 
 $ b $（：not（#hcontainer）img.lazy）。 lazyload（{
 effect：fadeIn，
 container：$（＃hcontainer）
}）; 
}）; 
  

编辑：

< a href =http://codepen.io/jcastillo/pen/EjdmXd =nofollow>演示

My website has a image grid, which has horizontal and vertical scroll. I want to load images which are vertically places first and then horizontal images, all of them lazily.

In other words, when user scroll down vertical images should load lazily and when user scrolls horizontally images the horizontal images should load lazily. I tried using lazyload, but I'm not able to use get it working for both vertical and horizontal images container.

Only horizontal or vertical scrolling is working at a time. I want both of them to work!

My test code is as follows,

<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>

It isn't working as I want it to be. Can anyone help me with it?

Please see following pic for the output, I need vertical images to be loaded lazily as well, which isn't happening.

解决方案

Add this to also assign the lazyload to the images that are not in the #hcontainer

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

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

Edit:

Demo

这篇关于如何延迟加载垂直图像&amp;水平？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！