繁体   English   中英

如何延迟垂直和水平加载图像?

[英]How to lazy load images vertically & horizontally?

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

换句话说,当用户向下滚动时,垂直图像应延迟加载;当用户向下滚动时,水平图像应延迟加载。 我尝试使用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>

它没有按我希望的那样工作。 有人可以帮我吗?

请参见下面的输出图片,我也需要延迟加载垂直图像,这是没有发生的。 在此处输入图片说明

我建议您尝试使用lazySizes 与其他lazyloader的最大区别在于,lazySizes无需配置即可自动检测可见性更改。

这可以使关注点分离,因为如果您更改CSS并添加滚动容器或在大型菜单内添加图像,则无需触摸JS lazyloader配置。

您需要做的所有事情就是添加lazysizes脚本并使用data-src而不是src并添加类lazyload

添加此选项还可将延迟加载分配给#hcontainer中没有的#hcontainer

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

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

编辑:

演示

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM