懒加载

通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

scroll监听

初始化img

<img data-src="https://tb1.bdstatic.com/tb/cms/liveshow/ent_slid2.jpg" class="lazy-image"/> 
// css部分 
.lazy-image { 
    background: url('../img/loading.gif') no-repeat center; 
} 

监听的回调函数

inViewShow() {     
    let imageElements = Array.prototype.slice.call(document.querySelectorAll('.lazy-image'))    
    let len = imageElements.length     
    for(let i = 0; i < len; i++) {         
        let imageElement = imageElements[i]        
        const rect = imageElement.getBoundingClientRect() // 出现在视野的时候加载图片         
        if(rect.top < document.documentElement.clientHeight) {             
            imageElement.src = imageElement.dataset.src // 移除掉已经显示的             
            imageElements.splice(i, 1)             
            len--             
            i--         
        }     
    } 
}
document.addEventListener('scroll', inViewShow)

还可以通过函数节流优化滚动事件的处理函数

关于clientHeight及其他scrollHeight、offsetHeight
1.clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度
2.offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度
3.scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）

Intersection Observer 特性

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

if ("IntersectionObserver" in window) {        
    let lazyImageObserver = new IntersectionObserver((entries, observer) => {          
        entries.forEach((entry, index) => {            
            // 如果元素可见            
            if (entry.intersectionRatio > 0) {              
                let lazyImage = entry.target              
                lazyImage.src = lazyImage.dataset.src              
                lazyImage.classList.remove("lazy-image")              
                lazyImageObserver.unobserve(lazyImage)              
                // this.lazyImages.splice(index, 1)            
            }          
        })        
    })        
    this.lazyImages.forEach(function(lazyImage) {          
        lazyImageObserver.observe(lazyImage);        
    })      
}else{
    //若不支持 则采用scroll监听
}

Chrome浏览器已经支持了lazy-load

chrome 75 之后，已经支持 img lazy-load 了，以后可以不用使用js 的库来实现了

<script>
  // 判断浏览器是否支持
  const hasSupport = 'loading' in HTMLImageElement.prototype;
  document.documentElement.className = hasSupport ? 'pass' : 'fail';
  
</script>

l懒加载
<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>

立刻加载图片
<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>

由浏览器决定是否懒加载
<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>

参考

图片懒加载
MDN-Intersection Observer
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
img lazyload chrome