js图片延迟加载的实现方法及思路

1. 什么是图片延迟加载？

图片延迟加载是一种优化网页性能的技术，又称为“图片懒加载”。在传统的页面加载中，页面中的图片是同步加载的，也就是在页面加载过程中，所有的图片都会被下载并渲染。然而，在某些时候，页面的某些图片并不是必要的，或者在用户刚打开页面时不可见，此时就会浪费用户的流量和时间。

图片延迟加载，是指在页面滚动到某个位置或者某个时间点再去加载图片。当用户打开页面时，只会加载页面上出现在视窗内部分的内容，其余的内容则延迟加载，优化了用户体验和网页性能。

1. 实现方法及思路

为了实现图片延迟加载，我们需要用到一些 JavaScript 技术。实现的基本步骤如下：

（1）将所有图片的 src 属性改为一个我们自定义的属性，例如 data-src。

（2）通过 JavaScript 监听 window 对象的 scroll 事件，当滚动到一定位置时，加载图片。

（3）在加载图片时，将自定义属性 data-src 的值赋给 src，再将 data-src 属性值置空。

（4）当图片加载完毕后，移除 scroll 事件监听。

以下是示例代码实现：

示例 1. 使用 JavaScript 实现图片懒加载

<!-- html code -->
<img data-src="image.jpg" alt="Alt text">
<img data-src="image2.jpg" alt="Alt text">
<!-- ... more images ... -->

<script>
  function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    const windowHeight = window.innerHeight;

    images.forEach(image => {
      const position = image.getBoundingClientRect();

      if (position.top < windowHeight) {
        const imageUrl = image.dataset.src;
        image.setAttribute('src', imageUrl);
        image.removeAttribute('data-src');
      }
    });

    // remove image loading events when all images are loaded
    if (images.length === 0) {
      window.removeEventListener('scroll', lazyLoad);
      window.removeEventListener('resize', lazyLoad);
      window.removeEventListener('orientationChange', lazyLoad);
    }
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationChange', lazyLoad);

  // run once on page load
  window.onload = lazyLoad;
</script>

在上述代码中，我们先判断所有带有 data-src 属性的图片是否进入了用户的视口，如果被用户看到了就将当前图片的自定义属性 data-src 赋值给 src 属性，完成图片的加载。

示例 2. 使用第三方库实现图片懒加载

在本例中，我们将使用 jQuery Lazy Load 实现图片懒加载。

<!-- html code -->
<img data-original="image.jpg" alt="Alt text">
<img data-original="image2.jpg" alt="Alt text">
<!-- ... more images ... -->

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" integrity="sha384-dR2BREjn46n7bf/4yJva1BDWtmvSwz3qbw89mMFwJhx/z6e6CTwNJctnn3GRJdYm" crossorigin="anonymous"></script>
<script>
  $('img').lazyload({
    effect: 'fadeIn',
  });
</script>

在上述代码中，我们通过引用 jQuery 和 jQuery Lazy Load 库，实现了简单的图片懒加载。使用该库的方法也很简单：只需将图片的 data-original 属性设置为图片的 URL，再引用对应的 jQuery 插件即可实现。同时，该库还提供了多种动画特效和配置选项，让你可以轻松地自定义页面加载时的显示效果、加载顺序等。