图片懒加载
原理:初始时给页面上的图片的src
设置为空值或者javascript:;
,给图片创建一个data-url
属性,并将图片正确的url赋值给data-url
属性,当图片到达浏览器视窗时,将data-url
的值赋值给src
属性,这样就达到了懒加载的目的;
实现懒加载前需要注意:
-
给html标签(当然其中就包括img)设置
data-*
属性,这个属性会被储存在dom的dataset属性中,它的属性名就是*
(例如我给img标签设置data-url
属性,那么可以在img元素内的dataset
属性中找到名为url
的属性) -
需要获取图片对于浏览器视窗的偏移距离(使用
getBoundingClientRect
API),只有当图片在视窗范围之内,才加载图片 -
对于已经加载的图片,应该将其
data-url
属性移除,避免再次加载 -
应该使用节流函数对懒加载节流,防止过于频繁的调用懒加载函数,造成资源浪费
ok 现在来实现懒加载
<div class="wrap">
</div>
let wrap = document.getElementsByClassName('wrap')[0];//获取wrap元素
let viewHeight = document.documentElement.clientHeight;//获取可视区高度
for (let i = 0; i < 100; i++) {
let img = document.createElement('img');
img.setAttribute('src','javascript:;');
img.setAttribute('data-url','../img/naruto.jpeg');
img.style.width = 200 + 'px';
img.style.height = 200 + 'px';
wrap.appendChild(img);
}
function throttle(fn,delay){//节流函数
let flag = true;
return function(){
if(!flag) return;
flag = false;
const args = arguments;
setTimeout(() => {
fn.apply(this,args)
flag = true;
}, delay);
}
}
function lazyLoad(){
let eles = document.querySelectorAll(" img[data-url] ");
console.log("else",eles);
eles.forEach((item,index) => {
if(item.dataset.url === '') return //如果已经加载过了,不再重新加载
let rect = item.getBoundingClientRect()//获取当前图片在浏览器视窗中的位置
if(rect.bottom >=0 && rect.top < viewHeight){
item.src = item.dataset.url;
item.removeAttribute('data-url')
}
})
}
lazyLoad();//初始时执行一次函数
window.addEventListener('scroll',throttle(lazyLoad,100))
最终效果:实际应用中应该将节流函数的延时调小,我这里为了方便看出效果故意将延时设置成了0.5s