- 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。
- 判断是否存在于可视区
- 浏览器视口高度 (document.documentElement.clientHeight)
- 待加载资源距离视口顶端位置
- 通过以上两点即可判断图片是否位于可视区内。
- 之后获取图片的真实地址
- 把真实地址赋给图片
源代码如下:
if(window.addEventListener){ document.write('add') window.addEventListener('scroll',lazyload); }else { window.attachEvent('onscroll',lazyload); } /* * params * ele: class || id */ imgLazy("#page") function imgLazy(ele) { let scrollElement = document.querySelector(ele); lazyload() } function lazyload(){ let viewH = document.documentElement.clientHeight; let nodes = document.querySelectorAll('img[data-src]'); Array.from(nodes).forEach((item,index) => { if(item.dataset.src==='') return; let rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ let img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' } }) }