js实现懒加载

最新推荐文章于 2023-08-28 09:54:00 发布

晓锋不懂你

最新推荐文章于 2023-08-28 09:54:00 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： js web

本文链接：https://blog.youkuaiyun.com/weixin_43627766/article/details/88828879

web前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用原生JS实现的图片懒加载技术。通过监听滚动事件，并采用节流函数限制事件处理频率，当图片进入可视区域时动态加载图片资源，以此提高网页性能。

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

原生js

    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','')
                }
            })
        }

    }