js图片懒加载

1.监听滚动

给img添加自定义属性data-src，避免页面渲染时img标签src请求图片。

       <img data-src="图片地址">

        // 获取所有img元素
        const images = document.querySelectorAll('img')
        // 监听滚动事件
        window.addEventListener('scroll', scrollChange)
        function scrollChange() {
            images.forEach(item => {
                // 获取图片元素距离顶部距离
                let imageTop = item.getBoundingClientRect().top
                // 获取页面可视高度
                let height = window.innerHeight
                // 判断图片元素距离小于页面可视高度代表图片元素出现再可视范围
                if (imageTop < height) {
                    // 获取自定义属性data-src得值
                    const data_src = item.getAttribute("data-src")
                    // 把自定义属性data-src得值赋值给src请求加载图片
                    item.setAttribute('src', data_src)
                }
            })
        }

监听滚动事件影响性能（不推荐）

2.使用IntersectionObserver构造函数（推荐）

给img添加自定义属性data-src，避免页面渲染时img标签src请求图片。

        <img data-src="图片地址">

        const images = document.querySelectorAll('img')
        // callback 为 IntersectionObserver 得回调函数
        const callback = entries => {
            entries.forEach(entry => {
                // isIntersecting为true则监测到元素出现在可视区域
                if (entry.isIntersecting) {
                    const image = entry.target;
                    const data_src = image.getAttribute("data-src");
                    image.setAttribute('src', data_src);
                    // 清除元素得监测
                    observer.unobserve(image)
                }
            })
        }
        // 创建IntersectionObserver构造函数实例对象
        const observer = new IntersectionObserver(callback)
        images.forEach(image => {
            // 监测元素
            observer.observe(image)
        })