彻底弄懂图片懒加载

拼搏现实的明天。 2023-03-04 12:26 20阅读 0赞

### 1、目标 ###

*  从浏览器底层渲染机制分析懒加载的意义
 *  最初基于JS盒模型实现的懒加载方案
 *  基于getBoundingClientRect的进阶方案
 *  手撕Lodash源码中的debounce（函数防抖）
 *  手撕Lodash源码中的throttle（函数节流）
 *  终极方案:IntersectionObserver
 *  未来设想:img.loading=lazy

### 2、从浏览器底层渲染机制分析懒加载的意义 ###

\* 为啥要做图片的延迟加载

\* 浏览器渲染页面

\* 1.构建DOM树

\* 2.构建CSSOM树

\* 3.生成RENDER TREE

\* 4.布局

\* 5.分层

\* 6.珊格化

\* 7.绘制

\* 构建DOM树中如果遇到img

\* 老版本：阻碍DOM渲染

\* 新版本：不会阻碍 每一个图片请求都会占用一个HTTP（浏览器同时发送的HTTP 6个）

\* 拿回来资源后会和RENDER TREE一起渲染

\* …

\* 开始加载图片，一定会让页面第一次渲染速度变慢（白屏）

\* 图片延迟加载：第一次不请求也不渲染图片，等页面加载完，其他资源都渲染好了，再去请求加载图片

\*/

### 3、 ###

// 核心代码
              // 加载条件：盒子底边距离BODY距离 < 浏览器底边距离BODY的距离
              // 方法一：
              let B = utils.offset(lazyImageBox).top + lazyImageBox.offsetHeight,
                A = winH + document.documentElement.scrollTop;
              if (B <= A) { 
                lazyImg(lazyImageBox);
              }
              /* */
              // 方法二：
              // let { 
              // bottom
              // } = lazyImageBox.getBoundingClientRect();
              // if (bottom <= winH) { 
              // lazyImg(lazyImageBox);
              // }
    
              // 方法三
              // IntersectionObserver 监听DOM对象，当DOM元素出现和离开视口的时候触发回调函数
              // let lazyImageBoxs,
              // observer = new IntersectionObserver(changes => { 
              // changes.forEach(item => { 
              // let { 
              // isIntersecting,
              // target
              // } = item;
              // if (isIntersecting) { 
              // lazyImg(target);
              // observer.unobserve(target);
              // }
              // });
              // });
              // 方案四： 每个图片加一个 loading="lazy" 兼容性差
            function lazyImg(lazyImageBox) { 
                let img = lazyImageBox.querySelector('img'),
                    trueImg = img.getAttribute('data-image');
                img.src = trueImg;
                img.onload = function () { 
                    // 图片加载成功
                    utils.css(img, 'opacity', 1);
                };
                img.removeAttribute('data-image');
            }