美文网首页
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