图片懒加载

人生到处知何似？应似飞鸿踏雪泥。

图片懒加载

• 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。

图片懒加载原理

• 一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

图片懒加载实现思路

1. 加载loading图片。

2. 判断哪些图片要加载 。

3. 隐形加载图片，创建一个临时图片，new Image() ，不会加载到页面上去，实现隐形加载。

4. 替换真图片，替换src属性。

布局位置基础

• 网页可见区域宽： document.body.clientWidth;

• 网页可见区域高： document.body.clientHeight;

• 网页可见区域宽： document.body.offsetWidth (包括边线的宽);

• 网页可见区域高： document.body.offsetHeight (包括边线的高);

• 网页正文全文宽： document.body.scrollWidth;

• 网页正文全文高： document.body.scrollHeight;

• 网页被卷去的高： document.body.scrollTop;

• 网页被卷去的左： document.body.scrollLeft;

• 网页正文部分上： window.screenTop;

• 网页正文部分左： window.screenLeft;

• 屏幕分辨率的高： window.screen.height;

• 屏幕分辨率的宽： window.screen.width;

• 屏幕可用工作区高度： window.screen.availHeight;

图片懒加载实现

function lazyload() {
  const imgs = document.getElementsByTagName('img');
  const len = imgs.length;
  // 视口的高度
  const viewHeight = document.documentElement.clientHeight;
  // 滚动条高度
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < len; i++) {
    const offsetHeight = imgs[i].offsetTop;
    if (offsetHeight < viewHeight + scrollHeight) {
      const src = imgs[i].dataset.src;
      imgs[i].src = src;
    }
  }
}

// 可以使用节流优化一下
window.addEventListener('scroll', lazyload);