带你了解图片懒加载中的节流（throttle）和防抖（debounce）机制

2023-10-02 16:10:32

<html>
<body>


<article>
<h2>图片懒加载中的节流（throttle）和防抖（debounce）机制</h2>

<p>图片懒加载是一种提高网页加载速度的技术，它可以将图片的加载延迟到它们出现在可视区域的时候再进行。这样可以减少网页的初始加载时间，并提高用户体验。</p>

<p>节流（throttle）和防抖（debounce）是两种常用的JavaScript函数执行策略，它们可以用来实现图片懒加载。节流函数会在一定时间间隔内只执行一次，即使它被多次调用。防抖函数则会在一定时间内只执行一次，但它是等到所有函数调用都结束后再执行。</p>

<p>图片懒加载中使用节流函数可以防止在滚动页面时频繁加载图片，从而降低网络请求的次数，提高网页加载速度。图片懒加载中使用防抖函数可以防止在快速滚动页面时多次加载同一张图片，从而减少不必要的资源浪费。</p>

<p>下面是一个使用节流函数实现图片懒加载的示例代码：</p>

```javascript
function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      lastTime = now;
      func(...args);
    }
  };
}

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach((img) => {
    const src = img.getAttribute('data-src');
    const rect = img.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      img.setAttribute('src', src);
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', throttle(lazyLoadImages, 100));

这个代码中，throttle函数将lazyLoadImages函数包装成一个节流函数，它将在每100毫秒内只执行一次lazyLoadImages函数。这样就可以防止在滚动页面时频繁加载图片，从而降低网络请求的次数，提高网页加载速度。

下面是一个使用防抖函数实现图片懒加载的示例代码：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
}

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach((img) => {
    const src = img.getAttribute('data-src');
    const rect = img.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      img.setAttribute('src', src);
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', debounce(lazyLoadImages, 100));