原生实现图片懒加载，提升网页性能的利器

2023-12-15 00:39:45

图片懒加载：优化网页性能的秘诀

在当今以速度至上的网络世界中，网页性能已成为用户体验和网站排名的关键因素。其中，图片作为网页中常见的元素，其加载时间直接影响着页面的整体加载时间。优化图片加载方式是提升网页性能的重要手段，而图片懒加载技术便是其中的佼佼者。

什么是图片懒加载？

图片懒加载是一种网页性能优化技术，其核心思想是推迟加载非立即需要的图片，直到用户滚动浏览到相应位置。通过这种方式，可以避免页面加载时一次性加载所有图片，从而减少网络请求数量、降低服务器压力和缩短页面加载时间。

图片懒加载的原理

原生实现的图片懒加载技术是通过修改图片元素的 src 属性来实现的。在 HTML 代码中，图片元素默认情况下具有 src 属性，该属性指定了图片的源文件路径。当浏览器解析 HTML 代码时，它会立即向服务器发送请求以加载图片。

图片懒加载技术通过将图片的 src 属性暂时设置为一个占位符（如 data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7），从而推迟图片加载。当用户滚动到图片所在位置时，再通过 JavaScript 动态修改 src 属性为实际的图片路径，触发图片加载。

图片懒加载的优势

图片懒加载技术具有以下优势：

减少网络请求数量： 通过推迟图片加载，可以减少页面加载时发送的网络请求数量，从而减轻服务器压力。
降低服务器负载： 由于网络请求数量减少，服务器负载也会相应降低，提高网站稳定性。
缩短页面加载时间： 通过减少网络请求数量和服务器负载，可以缩短页面加载时间，提升用户体验。
提高页面交互性： 懒加载图片在用户需要时才加载，不会影响页面的初始交互，从而提高页面交互性。

原生实现图片懒加载的方法

原生实现图片懒加载的方法主要涉及以下步骤：

添加占位符图片： 在 HTML 代码中，将图片的 src 属性设置为占位符图片。
设置滚动事件监听器： 通过 JavaScript 监听页面滚动事件，并在滚动到图片所在位置时触发图片加载。
修改图片 src 属性： 当滚动到图片所在位置时，通过 JavaScript 修改图片的 src 属性为实际的图片路径。

示例代码

以下示例代码展示了如何原生实现图片懒加载：

<img class="lazyload" data-src="image.jpg" alt="Image description">

const lazyloadImages = document.querySelectorAll(".lazyload");

window.addEventListener("scroll", () => {
  lazyloadImages.forEach((img) => {
    if (isElementInViewport(img)) {
      img.src = img.dataset.src;
      img.classList.remove("lazyload");
    }
  });
});

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}