关于懒加载的问题

最新推荐文章于 2024-12-30 17:23:52 发布

原创最新推荐文章于 2024-12-30 17:23:52 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

个人专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用原生JS实现的懒加载方案，并通过函数节流来减少scroll事件的触发频率，提高性能。同时，针对图片一次性加载的问题，提出了offsetTop的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间,公司开发一商城项目用到了懒加载,参考网上一篇有干货的博客,原生js提高懒加载的性能,节约scroll的次数,还有函数节流和函数防抖,这完美懒加载了有木有?

大牛写的完美懒加载:

window.onload = function(){

    var scrollTop = window.scrollY;
    var imgs = Array.from(document.querySelectorAll('img'));
    lazyLoad();
    // 采用了节流函数
    window.addEventListener('scroll',throttle(lazyLoad,500,1000));

    function throttle(fun, delay, time) {
        var timeout,
            startTime = new Date();
        return function() {

            var context = this,
                args = arguments,
                curTime = new Date();
            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔，触发 handler
            console.log(curTime - startTime)
            if (curTime - startTime >= time) {
                fun();
                startTime = curTime;
                // 没达到触发间隔，重新设定定时器
            } else {
                timeout = setTimeout(fun, delay);
            }
        };
    };
    // 实际想绑定在 scroll 事件上的 handler
    // 需要访问到imgs ,  scroll 
    function lazyLoad(){
        scrollTop = window.scrollY;
        imgs.forEach((item,index)=>{
            if( scrollTop===0 && item.dataset.src !== '' && item.offsetTop < window.innerHeight + scrollTop ){
                // alert()
                item.setAttribute('src',item.dataset.src)
                item.setAttribute('data-src','')
            }else if( item.dataset.src !== '' && item.offsetTop < window.innerHeight + scrollTop && item.offsetTop > scrollTop ){
                item.setAttribute('src',item.dataset.src)
                item.setAttribute('data-src','')
            }
        })
    }

}

进入页面从上到下懒加载, 刷写页面不管往上滑,还是往下滑都是懒加载,再加上函数节流和函数防抖,完全符合要求有木有?

但是拿来用的时候就发现问题了 ---- 图片是一次性加载的完的,emmmm 我要的懒加载呢?

然后 -> 找问题原因,发现lazyLoad()函数中item.offsetTop值跟想象中的不太一样哎,一点也不准确...坑

然后 -> 找兼容解决办法:

function offsetTop( elements ){ 
    var top = elements.offsetTop; 
    var parent = elements.offsetParent; 
    while( parent != null ){ 
         top += parent.offsetTop; 
         parent = parent.offsetParent; 
    }; 
    return top; 
};

最后把lazyLoad()函数中的判断条件 item.offsetTop 替换为 offsetTop(item), 结果就是我想要的效果.

感谢大牛hawkey7,原文链接(点击打开链接).