前端图片懒加载

在前端实现图片懒加载（Lazy Loading）是一种常见的优化网页加载速度的技术，特别是当网页包含大量图片时。懒加载的基本原理是延迟非关键资源（如屏幕外的图片）的加载，直到它们即将进入可视区域。

下面，我将使用TypeScript（基于JavaScript的一个超集）和HTML来展示如何实现图片懒加载。为了简单起见，我们将使用Intersection Observer API来监听图片元素何时进入视口。

1. HTML结构

首先，我们需要设置HTML结构，其中图片源地址（src）可以设置为一个占位符（如小图标或空白图片），而真实的图片地址则放在data-src属性中。

<img class="lazy-load" data-src="real-image-url.jpg" alt="示例图片" src="placeholder.jpg"> <!-- 更多图片 -->

2. TypeScript 和 Intersection Observer API

然后，我们使用TypeScript来编写懒加载的逻辑。

document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const lazyImage = entry.target as HTMLImageElement;
        if (lazyImage.dataset.src) {
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy-load');
          observer.unobserve(lazyImage);
        }
      }
    });
  }, {
    rootMargin: '0px',
    threshold: 0.1 // 当图片有10%进入视口时开始加载
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

关键点解释

• IntersectionObserver 构造函数接收两个参数：一个回调函数和一个配置对象。

• 回调函数在目标元素与根元素（或视口）的交叉区域发生变化时被调用。

• entry.isIntersecting 属性是一个布尔值，指示目标元素是否与根元素的视口交叉。

• 当图片进入视口（isIntersecting 为 true）时，我们将 data-src 的值赋给 src 属性，并移除 lazy-load 类（如果需要的话），然后停止观察该元素。

• rootMargin 可以定义根元素之外的额外空间，以便提前加载即将进入视口的图片。

• threshold 定义了交叉比例阈值，当交叉比例达到或超过此值时，会触发回调函数。

这种方法通过减少初始页面加载时的图片请求数量，来加快页面加载速度，同时提高用户体验。