我的网站有一个图像网格,它有水平和垂直滚动。我想先加载垂直放置的图像,然后加载水平图像,所有这些图像都是惰性的。
换句话说,当用户向下滚动垂直图像时,应延迟加载;当用户水平滚动图像时,水平图像应延迟加载。我尝试使用 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>
它没有按照我想要的方式工作。谁能帮我解决一下吗?
最佳答案
添加此选项还可将延迟加载分配给不在 #hcontainer
中的图像
$(function() {
$(":not(#hcontainer) img.lazy").lazyload({
effect: "fadeIn"
});
$("img.lazy").lazyload({
effect: "fadeIn",
container: $("#hcontainer")
});
});
编辑:
<强> Demo
关于javascript - 如何垂直和水平延迟加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31613057/