lazyload的简单实现

2018-11-07  本文已影响0人  淡烟疏雨_0950
// 获取所有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()
上一篇 下一篇

猜你喜欢

热点阅读