js实现图片的懒加载

原文地址：https://blog.phyer.cn/article/9277。欢迎大家访问我的博客(●ˇ∀ˇ●)

// 防抖

let lazy_timer;
window.addEventListener('scroll', function () {
　　if (lazy_timer !== null){
　　　　clearTimeout(lazy_timer)
　　}
　　lazy_timer = setTimeout(function () {
　　　　load_lazy();
　　}, 100)
});
// 必须在window.onload里主动调用一次
load_lazy();

// 懒加载
function load_lazy() {
　　$('.lazy-img:not([data-l])').each(function () {
　　　　let y = this.getBoundingClientRect().top;
　　　　if ((y+this.offsetHeight >= 0 && y <= document.body.clientHeight) || this.getAttribute('data-main') === 't') {
　　　　　　this.src = this.getAttribute('data-s');
　　　　　　this.setAttribute('data-l', '');
　　　　}
　　});
}

 

以上代码很简洁，主要就是三点

•  对需要懒加载的图片，src设置loading.gif，data-s设置成原本的src，加载后设置data-l用于分辨是否已加载。
•  监听scroll事件，如果图片进入了视野便执行替换src，此处注意防抖。
• 对需要懒加载的图片，最好加上onerror事件。当加载失败时，图片的占有空间(浏览器一般会放一个破碎的图片)和实际大小不符，导致下面的图片已经到了视野中，却没有被加载，就是这样: