共计 2814 个字符，预计需要花费 8 分钟才能阅读完成。
懒加载
代码实现
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<link rel=”stylesheet” href=”lazyload.css”>
</head>
<body>
<div class=”image-list”>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg” alt=””>
<img src=”” class=”image-item” lazyload=”true” data-original=”https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg” alt=””>
</div>
<script src=”./lazyload.js”></script>
</body>
</html>
css
.image-item {
display: inline-block;
width: 100%;
height: 300px;
background: gray;
}
js
var viewHeight = document.documentElement.clientHeight;
function lazyload() {
var eles = document.querySelectorAll(‘img[data-original][lazyload]’);
eles.forEach(function(item){
var rect;
if (item.dataset.original === ”) {
return
}
rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
(function() {
var img = new Image();
img.src = item.dataset.original;
console.log(img.src)
img.onload = function() {
item.src = img.src;
}
item.removeAttribute(‘data-original’)
item.removeAttribute(‘lazyload’)
})()
}
})
}
lazyload();
document.addEventListener(‘scroll’, lazyload)
效果
蓝色为已经请求加载的图片
红色为还没有请求加载的图片
默认打开，没有操作前
向下滚动前
向下滚动后
冷门属性
ocument.addEventListener（事件监听）
document.addEventListener(‘scroll’, function() {
console.log(‘aa’)
})
img.onload
事件在图片加载完成后立即执行
getBoundingClientRect
用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性
文档各种高度
document.documentElement.clientHeight: 视口的大小 document.documentElement.scrollHeight: 文档的大小 document.documentElement.offsetHeight: 文档的大小
