JS实现图片懒加载(lazyload)
2017-08-14 本文已影响96人
元气满满321
原理
对于<img>标签，在初次加载时，不把URI放在src属性中，而是自定义一个属性，比如data-src，然后仅当图片滚入视窗，被用户看到时，它才会真正加载。下图详解了如何判断何时加载图片。
判断何时加载图片
- 浏览器可视区域高度H，通常是固定的(这里不考虑手动调整窗口大小)
window.innerHeight可取得此值。 - 图片距离页面顶端的距离T，也是固定值可用
offsetTop(或getBoundingClientRect().top)方法计算。 - 浏览器滚动条滚过高度S，这是唯一变化的值
document.documentElement.scrollTop||document.body.scrollTop
计算。
当 H + S > T 时该图片出现在可视区域。
实现
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片延迟加载示例 - 吃饱了还饿</title>
<style>
div {
width: 50%;
margin: auto;
}
img {
display: block;
width: 550px;
height: 550px;
margin: 20px 0;
background: url(https://www.denpe.com/assets/favicon.ico) no-repeat center;
}
</style>
</head>
<body>
<div>
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/3.jpg">
<img src="" data-src="img/4.jpg">
<img src="" data-src="img/5.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
<img src="" data-src="img/2.jpg">
</div>
<script type="text/javascript">
const imgs = document.body.querySelectorAll("img");
const H = window.innerHeight;
function getTop(e) {
let top = e.offsetTop;
console.log(top);
while (e = e.offsetParent) {
top += e.offsetTop;
}
return top;
}
function lazyload() {
let S = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
if (imgs[].getAttribute("data-src")) {
if (H + S - 200 > getTop(imgs[i])) {//为达到演示效果，这里H+S减去200，延后加载时机
imgs[i].src = imgs[i].getAttribute("data-src");
imgs[i].removeAttribute("data-src");
}
}
}
}
window.addEventListener("scroll", lazyload, false);
window.addEventListener("load", lazyload, false);
</script>
</body>
</html>
参考
offsetTop,offsetParent
原生JS延时加载
每天努力一点点
谢谢你看完
