前言
面试的时候,面试官经常会问到一个问题,前端优化性能。其中,图片懒加载是性能优化的一个点。
准备
offsetTop
offsetTop是元素到offsetParent顶部的距离
offsetParent
offsetParent是距离具有定位的祖宗元素,若祖宗元素不符合,offsetParent默认为body
clientHeight
clientHeight是设备的高度
scrollTop
scrollTop是滑条顶部与页面顶部的距离
代码
<!DOCTYPE html>
<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-bottom: 50px;
width: 400px;
height: 400px;
/* 图片需要设置高,不然offsetTop默认每个图片之间距离为50 */
}
</style>
</head>
<body>
<img src="./img/loading.gif" data-src="./img/1.jpg" />
<img src="./img/loading.gif" data-src="./img/2.jpg" />
<img src="./img/loading.gif" data-src="./img/3.jpg" />
<img src="./img/loading.gif" data-src="./img/4.jpg" />
<img src="./img/loading.gif" data-src="./img/5.jpg" />
<img src="./img/loading.gif" data-src="./img/6.jpg" />
<img src="./img/loading.gif" data-src="./img/7.jpg" />
<img src="./img/loading.gif" data-src="./img/8.jpg" />
<img src="./img/loading.gif" data-src="./img/9.jpg" />
<script>
let n = document.getElementsByTagName("img").length; // 获取图片数量
let imgs = document.getElementsByTagName("img"); // 获取图片dom元素
let count = 0; // 图片计数,防止加载过的图片重新加载
lazyload(); // 执行第一遍,先把看到的图片先加载
window.onscroll = lazyload; // 为网页滑动事件绑定函数
function lazyload() {
let deviceHeight = document.documentElement.clientHeight; // 获取设备页面的高度
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滑动的距离
for (let i = count; i < n; i++) { // 从count开始遍历,避免多次执行
if (imgs[i].offsetTop < deviceHeight + scrollTop) { // 若当前图片距离页面顶部的高度小于滑条滑过的距离和页面高度的和,证明该图片已经在可视区域内,执行加载
if (imgs[i].getAttribute("src") == "./img/loading.gif") {
imgs[i].src = imgs[i].getAttribute("data-src");
}
count = i + 1;
}
}
}
</script>
</body>
</html>