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

下面我来详细讲解一下“javascript图片延迟加载实现方法及思路”的完整攻略。

什么是图片延迟加载

图片延迟加载（Lazy Load）是一种优化网页性能的技术，它可以延迟加载页面中的图片，使网页的加载速度更快，提升用户的体验。具体实现就是在网页中，把页面中的图片的真实地址存储在其他属性里，待页面加载完毕后，再通过 JavaScript 代码来获取并替换图片的地址。

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

图片延迟加载的实现思路如下：

1. 首先，在 HTML 中定义图片标签，并把图片的真实地址存储在自定义属性中，例如 data-src。
2. 使用 JavaScript 代码获取需要延迟加载的图片元素，并判断是否进入了可视区域。
3. 当图片进入可视区域时，使用 JavaScript 代码将 data-src 的值赋给 src 属性，实现图片的延迟加载。

下面是具体的实现代码：

<!-- 定义图片标签，将图片真实地址存储在 data-src 属性中 -->
<img class="lazyload" src="占位图" data-src="真实图片地址" alt="图片">

<script>
// 获取需要延迟加载的图片元素
const imgs = document.querySelectorAll('.lazyload');
// 定义一个变量记录可视区域的范围
let viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 监听窗口的滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动条距离顶部的距离
  let windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // 遍历需要延迟加载的图片元素
  for (let i = 0; i < imgs.length; i++) {
    // 判断图片是否已经进入可视区域
    if (imgs[i].getBoundingClientRect().top - windowScrollTop < viewHeight) {
      // 将 data-src 的值赋给 src，实现图片的延迟加载
      imgs[i].src = imgs[i].getAttribute('data-src');
    }
  }
});
</script>

上面的代码就是一个简单的图片延迟加载实现代码，它通过监听窗口的滚动事件，检测每一个图片元素是否进入可视区域来实现图片的延迟加载。

示例说明

下面给出两个示例说明，帮助更好地理解图片延迟加载的实现。

示例一

假设我们有 10 张图片需要在页面中显示，并且这些图片都很大，会影响网页的加载速度，我们可以使用图片延迟加载技术来优化页面性能。

首先，在 HTML 中定义图片标签，并将图片的真实地址存储在 data-src 属性中：

<img class="lazyload" src="占位图" data-src="图片1的真实地址" alt="图片1">
<img class="lazyload" src="占位图" data-src="图片2的真实地址" alt="图片2">
<img class="lazyload" src="占位图" data-src="图片3的真实地址" alt="图片3">
<!-- 省略其它图片 -->

然后，使用 JavaScript 代码获取需要延迟加载的图片元素，并监听窗口的滚动事件，在滚动事件触发时判断图片是否进入可视区域，并将图片的真实地址赋给 src 属性，实现图片的延迟加载：

// 获取需要延迟加载的图片元素
const imgs = document.querySelectorAll('.lazyload');
// 监听窗口的滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动条距离顶部的距离
  let windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // 遍历需要延迟加载的图片元素
  for (let i = 0; i < imgs.length; i++) {
    // 判断图片是否已经进入可视区域
    if (imgs[i].getBoundingClientRect().top - windowScrollTop < window.innerHeight) {
      // 将 data-src 的值赋给 src，实现图片的延迟加载
      imgs[i].src = imgs[i].getAttribute('data-src');
    }
  }
});

这样，当用户滚动页面时，每张图片都会在进入可视区域时才开始加载，从而提高了网页的加载速度。

示例二

假设我们的网站有一个长列表页面，其中包含着大量的图片，如果一次性全部加载，会严重影响网页性能，我们可以使用图片延迟加载技术来优化这个页面。

首先，我们需要根据页面结构，确定哪些图片元素需要使用延迟加载技术。

然后，在 HTML 中为这些图片元素添加 lazyload 类名，并将图片的真实地址存储在 data-src 属性中：

<div id="list">
  <img class="lazyload" src="占位图" data-src="图片1的真实地址" alt="图片1">
  <img class="lazyload" src="占位图" data-src="图片2的真实地址" alt="图片2">
  <img class="lazyload" src="占位图" data-src="图片3的真实地址" alt="图片3">
  <!-- 省略其它图片 -->
</div>

接着，使用 JavaScript 代码获取所有需要延迟加载的图片元素，并在滚动事件触发时，遍历这些图片元素，判断图片是否进入可视区域，并将图片的真实地址赋给 src 属性，实现图片的延迟加载：

// 获取需要延迟加载的图片元素
const imgs = document.querySelectorAll('.lazyload');
// 监听窗口的滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动条距离顶部的距离
  let windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // 遍历需要延迟加载的图片元素
  for (let i = 0; i < imgs.length; i++) {
    // 判断图片是否已经进入可视区域
    if (imgs[i].getBoundingClientRect().top - windowScrollTop < window.innerHeight) {
      // 将 data-src 的值赋给 src，实现图片的延迟加载
      imgs[i].src = imgs[i].getAttribute('data-src');
      // 在图片加载后，从列表中移除该图片元素
      imgs[i].classList.remove('lazyload');
    }
  }
});

这样，当用户滚动页面时，每次只会延迟加载屏幕内可见的图片，其它图片则会等待用户滚动到相应位置后再加载，从而提高了网页的加载速度。同时，我们还可以在图片加载后，将该图片元素从列表中移除，减少代码的运行成本和页面的内存占用。

阅读剩余 62%