沃梦达 / IT编程 / 前端开发 / 正文

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 src="image.jpg" alt="Alt text">
<img src="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 插件即可实现。同时,该库还提供了多种动画特效和配置选项,让你可以轻松地自定义页面加载时的显示效果、加载顺序等。

本文标题为:js图片延迟加载的实现方法及思路