1.用scroll事件,每次滚动的时候判断图片是否出现在可视区域了
2.用foreach来遍历每张图片到顶部的距离,如果图片距离视窗顶部的距离小于窗口显示区的高度
那么久要让图片开始加载
3.在html里面自定义属性(data-*)在图片上面来进行表示,浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的,因此我们可以把src属性改为data-src,这样就相当于不知道要在哪里下载这些图片了
4.当图片距离视窗顶部的距离小于窗口显示区的高度,把自定义属性赋值给原来的属性
5.最后对 scroll事件做防抖处理(就是定时器在固定时间内只触发一次),因为滚动事件每滚动触发的次数会很频繁,随便截了一个例子,具体代码结合具体实现
下面是一个例子(不应用于具体业务,只是单纯的一个例子演示)
<body>
<div class="container">
<div class="img">
<!-- 注意我们并没有为它引入真实的src -->
<img class="pic" alt="加载中"
data-src="https://tse1-mm.cn.bing.net/th/id/OIP.8OrEFn_rKe82kqAWFjTuMwHaEo?pid=Api&rs=1" />
</div>
<div class="img">
<img class="pic" alt="加载中"
data-src="https://ssl.tzoo-img.com/images/tzoo.94911.0.910013.seoul-nami.jpg?width=1080" />
</div>
<div class="img">
<img class="pic" alt="加载中"
data-src="https://tse4-mm.cn.bing.net/th/id/OIP.ZitgAuABnwkrGn4lid2ZmQHaEK?pid=Api&rs=1" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="http://pic34.photophoto.cn/20150315/0034034862056002_b.jpg" />
</div>
<div class="img">
<img class="pic" alt="加载中"
data-src="http://img.mp.sohu.com/upload/20170724/32d4409f34194b029ed287abf1c99b70_th.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075991913520.jpg" />
</div>
<div class="img">
<img class="pic" alt="加载中"
data-src="https://tse4-mm.cn.bing.net/th/id/OIP.PZdPKj3sXEX2jLrepx3MUwHaEo?pid=Api&rs=1" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075831439349.jpg" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075468043336.jpg" />
</div>
<div class="img">
<img class="pic" alt="加载中"
data-src="https://tse2-mm.cn.bing.net/th/id/OIP.CRYz5Bv4vylsMh83G4CsLgHaFj?pid=Api&rs=1" />
</div>
</div>
<script>
// 获取所有的图片标签
const imgs = document.getElementsByTagName("img");
//获取所有div盒子
// .........................................
// 获取可视区域的高度
const viewHeight =
window.innerHeight || document.documentElement.clientHeight;
// num用于统计当前显示到了哪一张图片,避免每次都从第一张图片开始检查是否露出
let num = 0;
function lazyload() {
console.log("滚动...");
for (let i = num; i < imgs.length; i++) {
// 用可视区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - imgs[i].getBoundingClientRect().top;
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度,说明元素露出
if (distance >= 0) {
// 给元素写入真实的src,展示图片
imgs[i].src = imgs[i].getAttribute("data-src");
// 前i张图片已经加载完毕,下次从第i+1张开始检查是否露出
num = i + 1;
}
}
}
// 防抖函数
function debounce(fn, delay) {
var timer = null;
delay = delay || 500;
return function () {
var args = Array.prototype.slice.call(arguments);
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(this, args);
}, delay);
};
}
// 是的页面初始化是加载首屏图片
window.onload = lazyload;
// 监听Scroll事件,为了防止频繁调用,使用防抖函数优化一下
window.addEventListener("scroll", debounce(lazyload, 600), false);
</script>
</body>
效果图如下: