2021-09-10

原理就是把图片的路径随便设置一个，等到图片可以被看到的时候再把图片路径替换

`` // 获取到每个图片
    let imgs = document.querySelectorAll('img')
    // 折起的页面高度
    let scrollheight = 0
    // 获取页面可视区的高度
    let visualheight = document.documentElement.clientHeight
    // 页面加载事件
    window.onload = function () {
        // 页面滚动事件
        window.onscroll = function () {
            // 把折起的页面高度从新赋值
            scrollheight = document.body.scrollTop || document.documentElement.scrollTop
            callback()
        }
        callback()
    }
 
    function callback() {
        
        for (let i = 0; i <= imgs.length - 1; i++) {
            // 循环imgs数组，判断图片顶部的距离是不是小于可视化页面高度+页面折起来的高度
            // 如果大于则说明图片已经到了可视化区域，然后把data-set的属性值替换到src的属性
            if (imgs[i].offsetTop < (scrollheight + visualheight)) {
                if (imgs[i].getAttribute('src') == '') {
                    console.log(`我是第${i+1}张图片，我已经到可视化区域，可以加载我了`);
                    imgs[i].src = imgs[i].getAttribute('data-set')
                }
            }
        }
    }`