之前做项目时遇到页面需要加载图片太多,导致网页打开很慢,那时就用到了懒加载。能够防止页面向服务器发送大量请求,导致服务器响应慢,页面卡顿崩溃等。
懒加载
原理:图片进入可视区域之后再去请求图片资源。
在图片进入可视化区域之后,动态的去设置img标签中的src属性。如果在可视区域之外的图片的img中的src属性已被提前设置,那么就不是懒加载了,而是所有图片都会被加载。
实现
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/11.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/12.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/13.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/14.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/15.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-src="./img2/16.jpg">
在浏览器可视区域的图片显示,可视区域外的不显示,所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了,就是说当top-height<=s+h时,图片在可视区。
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function(){
// 获取自定义属性data-src,用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}
}