图片懒加载原理

什么是图片懒加载？

当打开一个有很多图片的页面时，先只加载页面上可视区域的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。

图片懒加载的作用

减少或延迟请求数，缓解浏览器的压力，增强用户体验。

图片懒加载的基本原理

1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

1.document.documentElement.clientHeight获取屏幕可视窗口大小；
2.document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
3.判断当滚动条滚动到一定高度的时候就进行图片懒加载；

   let lazyImages = [...document.querySelectorAll('.lazy-image')]
    let inAdvance = 300 // 自定义一个高度，当距离300px到达图片时加载
    function lazyLoad() {
        lazyImages.forEach(image => {
            if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { // 距离xxpx时加载图片
                image.src = image.dataset.src
                image.onload = () => image.classList.add('loaded')
            }
        })
    }
    lazyLoad()
    window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的节流函数
    window.addEventListener('resize', _.throttle(lazyLoad, 16))