图片的延迟加载「懒加载」

结构样式

延迟加载处理：结构样式上

1.需要延迟加载的图片，外层包裹一层盒子；盒子具备宽高和默认的背景！
2.图片的src不赋值，真实图片地址赋值给data-src自定义属性！
3.为了防止出现没有加载真实图片，区域出现“碎图”，最开始让图片隐藏
- 可以设置display:none
- 也可以设置opacity:0 「推荐：可以设置渐现的动效」

这里我们只放结构样式，css的代码就不放了

 <div class="lazyBox">
        <img src=""  data-src="images/girl.webp">
 </div>

效果

最开始渲染页面，不加载真实的图片「但是位置预留出来了，也有宽高，用纯色背景或者loading图(小)占位」
等待页面其它资源都处理完毕 && 图片出现在可视窗口中（可以是：一露头、完全出现、出现一半），再去加载真实的图片地址！！
- 其它资源都处理完毕：window.onload
- 随着页面滚动条滚动：window.onscroll

意义

可以加快页面第一次渲染的速度，减少页面白屏等待时间！！
避免不必要的流量资源的浪费「尤其是移动端」
…

图解

方案一

(function () {
  let lazyBox = document.querySelector('.lazyBox'),
    imgBox = lazyBox.querySelector('img');

  // 处理延迟加载
  const handle = function handle() {
    if (imgBox.isLoad) return; //去除重复操作
    let { top, bottom } = lazyBox.getBoundingClientRect(),
      H = document.documentElement.clientHeight;
    if (bottom <= H && top >= 0) {
      // 符合加载的条件
      let trueImg = imgBox.getAttribute('data-src');
      imgBox.src = trueImg;
      imgBox.onload = () => {
        // 确保真实图片加载成功
        imgBox.style.opacity = 1;
      };
      imgBox.isLoad = true; //去除重复操作
    }
  };
  window.onload = handle;
  window.onscroll = utils.throttle(handle, 100);
 })();

onscroll事件会一直监听滚动条滚动，在浏览器的最快反应时间「谷歌5~7ms」内，会触发一次事件；
也就是：只要滚动条滚动中，它会每间隔5~7ms就触发执行一次，频率太快了！！
需要做一个优化：降低触发频率（专业称呼：函数节流）

方案二

IntersectionObserver：ES6新增的内置类；创建监听器，监听某一个（或者多个）DOM元素，和可视窗口的交叉状态发生改变，我们可以发生改变后，做一些事情！！{所谓交叉状态，就是元素出现在可视窗口和离开可视窗口时候会触发}

(function () {
  let lazyBox = document.querySelector('.lazyBox'),
    imgBox = lazyBox.querySelector('img');
  let ob = new IntersectionObserver(changes => {
    let item = changes[0];
    if (item.isIntersecting) {
      // 出现在视口中了
      imgBox.src = imgBox.getAttribute('data-src');
      imgBox.onload = () => {
        imgBox.style.opacity = 1;
      };
      // 已经处理完，移除监听
      ob.unobserve(item.target);
    }
  }, { threshold: [1] });
  ob.observe(lazyBox);
})();

Dom盒子模型

IntersectionObserver交叉观察器

文章版权归作者所有，未经允许请勿转载。

THE END