美文网首页
lazyload的简单实现

lazyload的简单实现

作者: 淡烟疏雨_0950 | 来源:发表于2018-11-07 13:44 被阅读0次
    // 获取所有img
    const images = document.getElementsByTagName('img')
    // 获取视口高度
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    // 图片初始序号
    let num = 0;
    function lazyload() {
        for (var i = num; i < images.length; i++){
            // 获取当前img的高度  并使用视口高度减去
            let currentTop = viewHeight - images[i].getBoundingClientRect().top
            // 当差值大于0的时候  说明当前元素已经露出
            if (currentTop >= 0){
                // 将当前img的src  进行替换
                images[i].src = images[i].getAttribute('data-src')
                // 重新开始的时候 从第i+1开始
                num = i + 1
            }
    
        }
    }
    
    lazyload()
    

    相关文章

      网友评论

          本文标题:lazyload的简单实现

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