美文网首页
手写懒加载方法

手写懒加载方法

作者: 我没叫阿 | 来源:发表于2023-06-15 14:22 被阅读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
                }
            }
    
        }
    

    相关文章

      网友评论

          本文标题:手写懒加载方法

          本文链接:https://www.haomeiwen.com/subject/zvrlydtx.html