什么是图片懒加载（Image Lazy Loading）？它的作用是什么？

在现代Web开发中，图片懒加载是一项关键的技术，它能够显著提升网页的加载速度和用户体验。本文旨在深入探讨图片懒加载的概念、作用以及其实现方式，并通过多个代码示例帮助开发者理解和掌握这一技术。

图片懒加载的基本概念

图片懒加载（Image Lazy Loading）是一种优化策略，其核心思想是在页面加载时，仅加载可视区域内的图片，而非立即加载页面上所有的图片资源。这种延迟加载机制减少了初始页面加载时的数据传输量，缩短了加载时间，从而提升了网站性能。

图片懒加载的作用

• 提高加载速度：通过减少首次加载时的数据传输量，加快了页面呈现的速度。
• 节省带宽：只加载用户可见的内容，减少了不必要的网络请求，节省了带宽成本。
• 提升用户体验：页面响应更快，用户无需等待长时间即可开始浏览，增强了整体的浏览体验。

实现图片懒加载的方法

示例一：使用原生Intersection Observer API

HTML5 和现代浏览器提供了Intersection Observer API，允许开发者监听元素是否进入视口，从而实现懒加载。

<!-- HTML结构 -->
<img class="lazy" data-src="path/to/image.jpg" alt="A beautiful image">

// JavaScript代码
const images = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver(entries => {
   
  entries.forEach(entry => {
   
    if (entry.isIntersecting) {
   
      const img = entry.target;
      img.src = img.data