图片延迟加载

图片延迟加载原理

1. 通过设置默认图片与图片属性的替换

<img src="默认图片.jpg" data-src="真实图片地址.jpg">

2. 通过监听滚动事件,判断图片是否进入视窗内
   当图片距离视窗顶高度小于窗口高度则表示图片已进入视窗内

let windowHeight = document.documentElement.clientHeight
let imgCurrentHeight = img.getBoundingClientRect().top

if(imgCurrentHeight <= widnowHeight){
    //触发
}

3. 由于滚动时一直调用函数会造成性能损失,所以使用函数节流

function throttle(fn,time){
    let lastTime = 0;
    return ()=>{
        let currTime = new Date();
        if(currTime - lastTime > time|| !lastTime){
            fn();
            lastTime = 0;
        }
    }
}

完整代码

//html
<img scr="默认图片.jpg" data-scr="真实地址.jpg">

//js
function throttle(fn,time){
    let lastTime = 0;
    return ()=>{
        let currTime = new Date();
        if(currTime - lastTime > time|| !lastTime){
            fn();
            lastTime = 0;
        }
    }
}

function lazyLoad(){
    let imgs = document.getElementsByTagName('img')
    let imgsLength = imgs.length
    let n = 0; //记录每次遍历的图片,防止重新遍历
    return ()=>{
        let windowHeight = document.documentElement.clientHeight
        let scrollHeight = document.documentElement.scrollTop
        for(let i = n;n < imgsLength;i++){
            if(imgs[i].getBoundingClientRect().top < windowHeight){//当图片距离视窗顶高度小于窗口高度则表示图片已进入视窗内
                if(imgs[i].getAttribute('src') === '默认图片.jpg' ){
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
                n += 1
            }
        }
    }
}

window.addEventListener('scroll',throttle(lazyLoad(),500))