懒加载

最新推荐文章于 2024-09-04 16:59:09 发布

小呀嘛小二郎唷

最新推荐文章于 2024-09-04 16:59:09 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/haohong5515/article/details/84639951

版权

JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

js判断进入可视区域

原生 JS 实现最简单的图片懒加载

原生JS实现最简单的图片懒加载

//是否进入可视区域
function isInsight(el) {
    const bound = el.getBoundingClientRect();
    const windowHeight =  window.innerHeight();
    return bound.top <= windowHeight ;
}


//用index标识已经加载过的图片，滚动条滚动时只需遍历未加载过的图片
let index = 0;
function checkImg() {
    const imgs = document.querySelectorAll(".my-photo");
    for(let i = index; i<imgs.length; i++ ) {
        if(inInsight) {
            loadImg(imgs[i]);
            index = i;
        }
    }
}

function loadImg(el) {
    if(!el.src){
        el.src = el.dataSet.src;
    }
}

函数节流

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}

页面代码

<img src="" data-src="xxx"/>
<img src="" data-src="xxx"/>
<img src="" data-src="xxx"/>
<img src="" data-src="xxx"/>


<script>
window.onload = checkImgs;
window.onscroll = throttle(checkImgs)
</script>