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事件。当加载失败时,图片的占有空间(浏览器一般会放一个破碎的图片)和实际大小不符,导致下面的图片已经到了视野中,却没有被加载,就是这样: