JS 原生图片懒加载

时间:2021-6-12 作者:qvyue




    


Document
JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载JS 原生图片懒加载
        let num = document.getElementsByTagName('img').length
        let img = document.getElementsByTagName('img')

        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') == './image/loading.git') {
                        //替换
                        img[i].src = img[i].getAttribute('data-src')
                    }
                    n = i + 1
                }
            }
        }
    
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。