基于纯JS实现多张图片的懒加载Lazy过程解析

下面我来详细讲解“基于纯JS实现多张图片的懒加载Lazy过程解析”的完整攻略。

背景

在传统的网页中，所有的图片都会在页面加载的时候一次性加载出来，这样会导致网页的加载速度变慢。为了提升网页的加载速度和用户的交互体验，我们可以使用懒加载技术。

懒加载是指在页面滚动到特定区域时，才开始加载相应的资源。通过懒加载，可以减少网页的加载时间，提升网页的性能，并且能够避免用户在等待页面加载时的无聊等待，提高用户的体验感。

实现步骤

第一步：找到需要懒加载的图片

把需要懒加载的图片添加到页面中，并且设置它们的data-src属性，属性值为真实的图片路径。

<!-- 懒加载的图片 -->
<img class="lazy" data-src="img/picture1.jpg" alt="Picture 1">
<img class="lazy" data-src="img/picture2.jpg" alt="Picture 2">
<img class="lazy" data-src="img/picture3.jpg" alt="Picture 3">

第二步：获取当前可视区域的高度和滚动条的高度

在页面滚动时，需要获取当前可视区域的高度和滚动条的高度。通过获取这些值，可以计算出页面滚动的百分比。

const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比

第三步：判断图片是否已进入可视区域

通过计算出当前滚动的百分比，可以计算出每个图片进入可视区域的临界值threshold。当图片的顶部 offsetTop 大于等于 threshold 时，说明图片已经进入了可视区域，此时需要加载图片。

const images = document.querySelectorAll('.lazy');
const threshold = 0.5; // 阈值为页面高度的一半
const lazyLoad = (image) => {
  if (image.offsetTop < (scrollTop + viewHeight) * threshold && !image.src) {
     image.src = image.dataset.src; // 加载图片
  }
}
images.forEach(lazyLoad); // 遍历所有懒加载的图片

通过添加滚动事件监听器，可以在页面滚动时响应相应的事件。

window.addEventListener('scroll', () => {
  images.forEach(lazyLoad); // 检查所有的懒加载图片
});

示例说明

示例一

假设我们有一个图片列表，所有的图片都使用懒加载技术。这个图片列表会在用户滚动页面时逐渐出现，提高用户体验。下面是这个图片列表的HTML代码片段：

<ul class="image-list">
  <li><img class="lazy" data-src="img/picture1.jpg" alt="Picture 1"></li>
  <li><img class="lazy" data-src="img/picture2.jpg" alt="Picture 2"></li>
  <li><img class="lazy" data-src="img/picture3.jpg" alt="Picture 3"></li>
  <li><img class="lazy" data-src="img/picture4.jpg" alt="Picture 4"></li>
  <li><img class="lazy" data-src="img/picture5.jpg" alt="Picture 5"></li>
</ul>

接下来，我们可以使用下面的JavaScript代码来实现懒加载：

const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const images = document.querySelectorAll('.lazy');
const threshold = 0.5; // 阈值为页面高度的一半

const lazyLoad = (image) => {
  if (image.offsetTop < (scrollTop + viewHeight) * threshold && !image.src) {
     image.src = image.dataset.src; // 加载图片
  }
};

const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
  const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比

  images.forEach(lazyLoad); // 遍历所有懒加载的图片
};

window.addEventListener('scroll', handleScroll);

当页面滚动时，每个图片都会在它进入可视区域时被加载。通过使用阈值，可以控制图片何时被加载。

示例二

假设我们需要使用懒加载技术加载一个带有背景图片的元素。这是这个元素的HTML代码片段：

<div class="container" data-src="img/background.jpg"></div>

下面是使用JavaScript实现的懒加载代码：

const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const containers = document.querySelectorAll('.container');
const threshold = 0.5; // 阈值为页面高度的一半

const lazyLoad = (container) => {
  if (container.offsetTop < (scrollTop + viewHeight) * threshold && !container.style.backgroundImage) {
      container.style.backgroundImage = `url(${container.dataset.src})`; // 加载背景图片
  }
};

const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
  const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比

  containers.forEach(lazyLoad); // 遍历所有懒加载的容器
};

window.addEventListener('scroll', handleScroll);

当元素进入可视区域时，它的背景图片就会被加载。通过使用阈值，可以控制图片何时被加载。