探索图片懒加载的最佳实践及封装一个懒加载插件

这周研究了下目前图片懒加载的所有主流方式，分享下，末尾封装了一个兼容所有方式的图片懒加载插件

图片懒加载的意义：

1.首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获取加载，如果图片数量较大，对于用户来说简直就是灾难，会出现卡顿现象，影响用户体验。
2.有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

原理：

1、将页面中的img标签src指向一张小图片或者src为空，
2、然后定义data-image属性（这个属性可以自定义命名，我常用data-image）属性指向真实的图片。
3、当载入页面时，先把可视区区域内的img标签的data-src属性值赋值给src。
4、然后监听滚动事件，加载用户即将看到的图片

怎么做：

先说结论，四种方式实现图片懒加载：从上到下，也是发展顺序的先后，可以划分为：

1. 基于JS盒模型实现的懒加载方案(兼容性最好)
2. 基于getBoundingClientRect的进阶方案(ie5以上都能支持)
3. 终极方案:IntersectionObserver(ie不支持，性能最最好)
4. 未来设想:img.loading=lazy(只有chrome76以上支持)

以下只演示核心逻辑：

基于JS盒模型实现的懒加载方案：

  // 加载条件：盒子底边距离BODY距离 < 浏览器底边距离BODY的距离
		    let winH = window.innerHeight;
            let B = lazyImageBox.offsetTop + lazyImageBox.offsetHeight,
                A = winH + document.documentElement.scrollTop;
            if (B <= A) {
   
               //达到条件，把该img标签data-image属性上的值赋值给src属性
                lazyImg(lazyImageBox);
            } 

基于getBoundingClientRect的进阶方案

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

		let winH = document.documentElement.clientHeight;
		let {
   
            bottom
        } = lazyImageBox.getBoundingClientRect();
        if (bottom <= winH) {
   
        //达到条件，把该img标签data-image属性上的值赋值给src属性
            lazyImg(lazyImageBox);
        }

基于IntersectionObserver的终极方案（性能最好）

这个IntersectionObserverAPI比较新，这里只说应用，详情看文档

	// 实现图片的延迟加载
    // IntersectionObserver 监听DOM对象，当DOM元素出现和离开视口的时候触发回调函数
        observer = new IntersectionObserver(changes => {
   
            changes.forEach(item => {
   
                let {
   
                //这个属性表示是否出现在视口中，ture/false
                    isIntersecting,
                //目标dom元素
                    target
                } = item;
                if (isIntersecting) {
   
                    lazyImg(target);
                    observer.unobserve(target);
                }
            });
        });


       let lazyImageBoxs = Array.from(document.querySelectorAll('img')) 
       lazyImageBoxs.forEach(lazyImageBox => {
   
            observer.observe(lazyImageBox);
        });