手写懒加载方法

2023-06-15  本文已影响0人  我没叫阿
    // 获取有几个标签
    let num = document.getElementsByTagName('img').length  
    // 获取标签
    let img = document.getElementsByTagName('img')  
    // 获取img标签的原本src的值
    let imgUrl = './images/loading.gif'
    // 定义一个数,为了防止之前加载过的图片重复加载
    let n = 0

    lazyLoad()
    // 页面滚动调用懒加载方法
    window.onscroll = lazyLoad  

    // 懒加载方法
    function lazyLoad() {
        // 获取设别屏幕高度
        let seeHeight = document.documentElement.clientHeight  
        // 滚动条滚动的距离
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop   

        for (let i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute('src') === imgUrl) {
                    // 把data-src里存储的真实图片地址赋值给rc
                    img[i].src = img[i].getAttribute('data-src')
                }
                n = i + 1
            }
        }

    }
上一篇 下一篇

猜你喜欢

热点阅读