响应式设计中实现 “图片懒加载” 的方法详解-JavaScript中文网-JavaScript教程资源分享门户

在响应式设计中，图片是网页中占用流量最大的元素之一。为了提高页面加载速度和用户体验，我们常常会采用图片懒加载技术。本文将详细介绍图片懒加载的实现方法，并提供示例代码供学习参考。

什么是图片懒加载？

图片懒加载是指在页面加载时，只加载可视区域内的图片，而不是一次性加载所有图片。这样可以减少页面的加载时间和流量消耗，提高用户体验。

实现图片懒加载的方法

实现图片懒加载的方法有很多种，其中比较常用的是以下两种：

1. Intersection Observer API

Intersection Observer API 是浏览器提供的一种新的 API，可以用于监听元素是否进入或离开可视区域。我们可以利用这个 API 来实现图片懒加载。

具体实现步骤如下：

遍历页面上所有需要懒加载的图片元素，给它们添加一个 data-src 属性，值为图片的真实地址。
使用 Intersection Observer API 监听每个图片元素是否进入可视区域。
如果某个图片元素进入可视区域，就将它的 src 属性设置为 data-src 属性的值，即真实地址。

示例代码如下：

<img class="lazy" data-src="path/to/image.jpg" alt="图片">

// javascriptcn.com 代码示例
const lazyImages = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      observer.unobserve(lazyImage);
    }
  });
});
lazyImages.forEach(lazyImage => {
  observer.observe(lazyImage);
});

2. 自定义事件

另一种实现图片懒加载的方法是使用自定义事件。具体实现步骤如下：

遍历页面上所有需要懒加载的图片元素，给它们添加一个 data-src 属性，值为图片的真实地址。
监听页面滚动事件，当某个图片元素进入可视区域时，触发自定义事件。
在自定义事件的回调函数中，将图片的 src 属性设置为 data-src 属性的值，即真实地址。

示例代码如下：

<img class="lazy" data-src="path/to/image.jpg" alt="图片">

// javascriptcn.com 代码示例
const lazyImages = document.querySelectorAll('.lazy');
const lazyLoad = () => {
  lazyImages.forEach(lazyImage => {
    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }
  });
};
window.addEventListener('scroll', lazyLoad);

总结

图片懒加载是响应式设计中常用的优化技术之一，可以减少页面的加载时间和流量消耗，提高用户体验。本文介绍了两种实现图片懒加载的方法，并提供了示例代码供学习参考。在实际项目中，可以根据具体情况选择适合自己的方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656a92ccd2f5e1655d2fa871