js实现图片的懒加载

javascript/jquery

浏览数:175

2020-5-23

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

// 防抖

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

作者:yunyuyuan