图片的懒加载是提高页面加载性能，提升用户体验的方式之一，也是工作中必不可少的一个优化环节
实现思路：主要是通过监听滚动条滚动事件，当图片区域距离顶部的距离 < 视口区域 + 滚动条卷起的高度时替换图片的src，还可以应用闭包和节流的方式来优化代码，如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
<style>
img { display: block; margin: 50px auto; }
</style>
</head>
<body>
<img src="img/loading.gif" data-src="img/case_boss.jpg">
<img src="img/loading.gif" data-src="img/case_jd.jpg">
<img src="img/loading.gif" data-src="img/case_lkss.jpg">
<img src="img/loading.gif" data-src="img/case_lt.jpg">
<img src="img/loading.gif" data-src="img/case_tx.jpg">
<img src="img/loading.gif" data-src="img/case-1.png">
<img src="img/loading.gif" data-src="img/case-2.png">
<img src="img/loading.gif" data-src="img/case-3.png">
<img src="img/loading.gif" data-src="img/case-4.png">
<img src="img/loading.gif" data-src="img/case-5.png">
<script>
/**
* 图片懒加载(闭包，节流)
*/
function initLoad () {
let n = 0; // 用来img的计算，避免已替换src的再被重复替换
const lazyLoad = function () {
const seeHeight = document.documentElement.clientHeight; // 可见区域
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条卷起的高度
const imgs = document.querySelectorAll('img');
for (let i = n; i < imgs.length; i++) {
// 图片区域距离顶部的距离 < 视口区域 + 滚动条卷起的高度时替换图片的src
if (imgs[i].offsetTop < (seeHeight + scrollTop) && imgs[i].getAttribute('src').indexOf('loading.gif') !== -1) {
imgs[i].src = imgs[i].getAttribute('data-src');
n++;
}
}
}
return lazyLoad;
}
// 节流处理，每隔300ms规定执行
function throllte(fn) {
let timer = null;
return function () {
if (timer) return;
timer = setTimeout(() => {
fn.apply(this, Array.prototype.slice(arguments))
timer = null;
}, 300);
}
}
const lazyLoadImg = initLoad();
lazyLoadImg();
window.onscroll = throllte(lazyLoadImg);
</script>
</body>
</html>
实现效果如下
随着滚动条的滚动，逐步加载图片
