前端性能优化：从零开始的图片懒加载实现

站长

2023年06月21日 16:02 · 阅读数 13

在前端开发中，性能优化是一个非常重要的环节。图片懒加载是一种常见的优化手段，它可以有效地减少页面的初始加载时间，提高用户体验。本文将介绍如何从零开始实现图片懒加载功能。

什么是图片懒加载？

图片懒加载是一种按需加载图片的技术，即只有当图片进入用户视口时才开始加载。这样可以避免一开始就加载页面上所有的图片，从而减少页面的初始加载时间。

实现图片懒加载

接下来，我们将分步骤实现一个简单的图片懒加载功能。

1. HTML 结构

首先，我们需要创建一个包含若干图片的 HTML 页面。为了实现懒加载，我们需要将 img 标签的 src 属性替换为 data-src，并为每个 img 标签添加一个 lazyload 类名。

html复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Lazy Loading</title>
  <style>
    img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img class="lazyload" data-src="https://example.com/image1.jpg" alt="Image 1">
  <img class="lazyload" data-src="https://example.com/image2.jpg" alt="Image 2">
  <!-- 更多图片 -->
  <script src="lazyload.js"></script>
</body>
</html>

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现懒加载功能。首先，我们需要获取页面上所有带有 lazyload 类名的 img 标签，并监听浏览器的滚动事件。

javascript复制
// lazyload.js
const lazyloadImages = document.querySelectorAll('.lazyload');

window.addEventListener('scroll', lazyload);

接下来，我们需要编写 lazyload 函数。该函数的主要任务是遍历所有带有 lazyload 类名的 img 标签，判断它们是否进入了用户视口。如果进入了视口，就将 data-src 属性的值赋给 src 属性，从而开始加载图片。

javascript复制
function lazyload() {
  const windowHeight = window.innerHeight;

  for (const img of lazyloadImages) {
    const imgRect = img.getBoundingClientRect();

    if (imgRect.top < windowHeight && imgRect.bottom > 0) {
      img.src = img.dataset.src;
      img.classList.remove('lazyload');
    }
  }
}

为了确保页面加载时就能正确显示已经在视口内的图片，我们需要在页面加载完成后立即调用一次 lazyload 函数。

javascript复制
window.addEventListener('load', lazyload);

至此，我们已经实现了一个简单的图片懒加载功能。当然，这个实现还有很多可以优化的地方，例如使用 IntersectionObserver API 替代滚动事件监听，以及添加图片加载失败时的处理逻辑等。

总结

图片懒加载是一种非常实用的前端性能优化手段。通过本文的介绍，希望你能了解到如何从零开始实现图片懒加载功能。在实际项目中，你还可以根据需求对这个功能进行进一步优化和扩展。