滚动条监听-懒加载

最新推荐文章于 2024-12-10 16:06:33 发布

gigi就是我

最新推荐文章于 2024-12-10 16:06:33 发布

阅读量1.1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

100 篇文章

订阅专栏

本文介绍了一种利用节流函数优化懒加载的方案。通过实现简单的节流函数和检查元素是否在视口内的方法，文章展示了如何在滚动事件中采用节流技术按需加载图片，从而提高网页性能。

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

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};

// 判断元素是否在可视范围内
function elementInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
}

function lazyLoadImgs() {
    const count = 0;
      return function() {
          [].slice.call(images, count).forEach(image => {
              if(elementInViewport(elementInViewport(image))) {
                image.setAttribute('src', image.getAttribute('data-src'));
                  count++;
              }
          });
    }
}

const images = document.getElementByTagName('img');
// 采用了节流函数, 加载图片
window.addEventListener('scroll',throttle(lazyLoadImgs(images),500,1000));