背景和原理
浏览器在解析网页时会解析整个HTML代码，一般情况下，浏览器会请求其中所有的图片并把它们都下载下来(虽然并不会阻塞后续的渲染)，但当图片很多而网络速度不够快时，这还是会照成页面加载时的卡顿(作为<img> 内容的图片和作为背景的图片互相抢网速)；而且对于移动端用户，会因只想点进来看一下而耗费不少的流量。这时，如果使图片按需加载，则能一定程度上缓解页面加载时的卡顿，也能使移动端用户不会浪费不该浪费的流量。
实现懒加载的原理为把 <img> 的 src 属性设置为预加载的图片或者设为 空，把图片的真实路径设置在 data-src 之类的属性中；在需要加载图片的时候用 data-src 属性的内容替换掉 src 属性的内容，浏览器会进行实时加载。
实现
其中一种情况为监听浏览器的滚动条，当滚动条滚到图片的位置时，加载该图片。
<!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>LazyloadImage</title>
<style>
img {
display: block;
margin-bottom: 10px;
min-height: 250px;
}
</style>
</head>
<body>
<img src = "loading.gif" data-src = "demo1.jpg" />
<img src = "loading.gif" data-src = "demo2.jpg" />
<img src = "loading.gif" data-src = "demo3.jpg" />
<img src = "loading.gif" data-src = "demo4.jpg" />
<img src = "loading.gif" data-src = "demo5.jpg" />
<img src = "loading.gif" data-src = "demo6.jpg" />
<img src = "loading.gif" data-src = "demo6.jpg" />
<script>
var imgList = document.getElementsByTagName('img');
var len = imgList.length;
var n = 0;
window.onscroll = function() {
var usrHeight = document.documentElement.clientHeight;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
for(let i = n; i < len; i++) {
if(imgList[i].offsetTop < usrHeight + scrollTop) {
if(imgList[i].getAttribute('src') == './loading.gif') {
imgList[i].src = imgList[i].getAttribute('data-src');
}
n = i + 1;
}
}
}
var event = new UIEvent('doScroll');
event.initUIEvent('scroll', true, false, window, 0);
window.dispatchEvent(event);
</script>
</body>
</html>
scrollTop: Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
本例中，scrollTop 为获取到浏览器滚动的距离(屏幕顶部与HTML页面的距离)。
clientHeight: Element.clientHeight 属性(只读)获取元素内部高度的单位像素，包含内边距，但不包括水平滚动条、边框和外边距。
本例中，usrHeight 为获取页面可视区域(浏览器的显示区域)的高度。
offsetTop: Element.offsetTop 属性(只读)获取元素距根元素顶部的距离。
本例中imgList[i].offsetTop 为获取各个图片在页面的 Y轴 位置(与根元素顶部的距离)。
最后调用一下 UIEvent (用户界面事件)来触发 window.onscroll 来初始化(使一开始出现在可视区域的图片加载)。
另一种情况为初始时显示预加载的图片，用户点击图片后再加载该图片。
<!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>clickLoad</title>
<style>
img {
display: block;
margin-bottom: 10px;
min-height: 250px;
}
</style>
</head>
<body>
<div id = "img-list">
<img src = "loading.gif" data-src = "demo1.jpg" />
<img src = "loading.gif" data-src = "demo2.jpg" />
<img src = "loading.gif" data-src = "demo3.jpg" />
<img src = "loading.gif" data-src = "demo4.jpg" />
<img src = "loading.gif" data-src = "demo5.jpg" />
<img src = "loading.gif" data-src = "demo6.jpg" />
<img src = "loading.gif" data-src = "demo6.jpg" />
</div>
<script>
var imgList = document.getElementsByTagName('img');
var len = imgList.length;
document.getElementById("img-list").addEventListener("click", function(e){
var e = e || window.e;
if(e.target.src != e.target.getAttribute("data-src")) {
e.target.src = e.target.getAttribute("data-src");
}
e.stopPropagation();
}, false);
</script>
</body>
</html>
通过事件冒泡，使点击事件冒泡给父元素来处理；其中 e 为事件驱动源，在本例中其保存了被点击元素的信息，通过其替换 src 为 data-src 的内容来实现图片的加载。
网友评论