在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。
为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。
懒加载的好处
(1)减少加载时的线程数据,可以使可视区内的图片快速加载
(2)减少了同一时间发送到服务器的请求数量,减轻服务器压力
懒加载原理
一张图片就是一个标签,浏览器是否发起请求图片是根据的src属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给的src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。
图片懒加载的思路
将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。
关于各种宽和高
页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
懒加载的示例
<div class="imglist">
<!-- src存放的是一个伪图片,等待的图片,data-src是自定义属性,存放真实的图片地址 -->
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
<img src="images/1.jpg" data-src="img/1.jpg" alt="pic">
<img src="images/2.jpg" data-src="img/2.jpg" alt="pic">
</div>
.
.
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function () {
// 获取图片列表
var img = document.querySelectorAll('img')
// 获取到浏览器顶部的距离
function getTop(e) {
return e.offsetTop;
}
// 懒加载实现
function lazyload(img) {
// 可视区域高度
var innerH = window.innerHeight;
//滚动区域高度
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < img.length; i++) {
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((innerH + scrollT) > getTop(img[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function (i) {
setTimeout(function () {
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = img[i].getAttribute('data-src'); //只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function () {
// 获取自定义属性data-src,用真图片替换假图片
img[i].src = img[i].getAttribute('data-src')
}
}, 2000)
})(i)
}
}
}
lazyload(img);
// 滚屏函数
window.onscroll = function () {
lazyload(img);
}
}