html怎么实现懒加载图片懒加载优化方法-html教程-PHP中文网

html怎么实现懒加载图片懒加载优化方法

穿越時空

发布： 2025-06-23 09:36:02

原创

405人浏览过

图片懒加载是指延迟加载视口外的图片，以提升首屏加载速度并优化用户体验。1. 使用 loading="lazy" 属性实现原生懒加载，无需额外代码；2. 利用 intersection observer api 实现更灵活的控制，如预加载；3. 通过监听 scroll 事件判断图片是否进入视口，但性能较差；4. 使用第三方库如 lazyload 或 lozad.js 简化开发流程。为避免图片闪烁，需设置固定宽高、使用 aspect-ratio 属性或添加占位符。优化性能方面包括避免过度使用懒加载、合理设置加载阈值、使用 cdn 和 http/2、压缩图片及利用 service worker 缓存。seo 方面需确保搜索引擎可执行 javascript，或使用 noscript 标签提供备用方案，并可通过 lighthouse 工具检测优化效果。

html怎么实现懒加载图片懒加载优化方法

图片懒加载，简单来说，就是页面上的图片不是一次性全部加载，而是当图片进入用户视口（或者说即将进入视口）时才进行加载。这样可以显著提升首屏加载速度，优化用户体验，尤其是在图片较多的页面上。

图片懒加载优化方法

解决方案

实现图片懒加载的核心思路是：延迟加载视口外的图片。具体方法有很多，下面列举几种常见的：

立即学习“前端免费学习笔记（深入）”；

使用 loading="lazy" 属性（原生懒加载）

这是最简单的方法，现代浏览器都支持 loading 属性。只需要在标签中添加 loading="lazy" 即可。
@@##@@
登录后复制
登录后复制
登录后复制
登录后复制
浏览器会自动处理图片的懒加载，无需编写额外的 JavaScript 代码。性能方面，原生懒加载通常表现良好，但不同浏览器的实现可能存在差异。

使用 Intersection Observer API

Intersection Observer API 提供了一种异步观察目标元素与其祖先元素或 viewport 相交情况的方法。我们可以利用它来判断图片是否进入视口，然后动态加载图片。

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src'); // 移除 data-src 属性，避免重复加载
      observer.unobserve(img); // 停止观察
    }
  });
});

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

登录后复制

HTML:

@@##@@

登录后复制

这种方法更加灵活，可以自定义加载时机，例如在图片进入视口前预先加载。

使用 JavaScript 监听 scroll 事件

这是比较传统的做法，通过监听 scroll 事件，计算图片距离页面顶部的距离，判断是否进入视口。

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  const viewportTop = window.pageYOffset;
  const viewportBottom = viewportTop + window.innerHeight;

  images.forEach(img => {
    const imgTop = img.offsetTop;

    if (imgTop >= viewportTop && imgTop <= viewportBottom) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad); // 监听 resize 事件，防止页面缩放导致图片未加载
document.addEventListener('DOMContentLoaded', lazyLoad); // 页面加载完成后执行一次

登录后复制

HTML:

@@##@@

登录后复制

这种方法实现起来比较简单，但性能不如 Intersection Observer API，因为 scroll 事件触发频率很高。

使用第三方库

有很多成熟的 JavaScript 库可以帮助我们实现懒加载，例如：
- LazyLoad: 一个轻量级的懒加载库，使用简单，功能强大。
- lozad.js: 基于 Intersection Observer API 的懒加载库，性能优秀。
使用第三方库可以简化代码，提高开发效率。

如何选择合适的懒加载方法？

选择哪种懒加载方法取决于你的项目需求和技术栈。

如果你的项目只需要简单的懒加载，并且兼容性要求不高，可以使用 loading="lazy" 属性。 这是最简单快捷的方法。
如果需要更精细的控制，例如预加载、自定义加载时机等，可以使用 Intersection Observer API。 这种方法性能较好，也比较灵活。
如果需要兼容旧版本浏览器，可以使用 JavaScript 监听 scroll 事件。 但要注意性能优化，避免频繁触发 scroll 事件。
如果希望快速实现懒加载，并且不想自己编写大量的 JavaScript 代码，可以使用第三方库。 选择一个成熟、可靠的库可以节省大量时间和精力。

懒加载后图片出现闪烁怎么办？

懒加载后图片出现闪烁通常是因为图片加载过程中，元素的高度塌陷，导致页面重新布局。解决这个问题的方法是：

预先设置图片容器的宽高。 在标签上设置 width 和 height 属性，或者使用 CSS 设置容器的宽高。这样可以防止图片加载过程中，元素的高度塌陷。
@@##@@
登录后复制
登录后复制
登录后复制
登录后复制
使用 CSS aspect-ratio 属性。 aspect-ratio 属性可以设置元素的宽高比，浏览器会根据宽高比自动计算元素的高度。
```
img {
  aspect-ratio: 3 / 2; /* 设置宽高比为 3:2 */
  object-fit: cover; /* 保持图片比例，并填充整个容器 */
}
```
登录后复制

使用占位符。 在图片加载完成之前，显示一个占位符，例如一个灰色方块或者一个加载动画。这样可以防止页面重新布局，减少闪烁感。

<div class="image-container">
  @@##@@
  <div class="placeholder"></div>
</div>

登录后复制

.image-container {
  position: relative;
  width: 600px;
  height: 400px;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  z-index: 1;
}

.image-container.loaded .placeholder {
  display: none;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

登录后复制

如何优化懒加载的性能？

懒加载本身是为了优化性能，但如果使用不当，反而会降低性能。以下是一些优化懒加载性能的建议：

避免过度使用懒加载。 对于首屏可见的图片，应该直接加载，而不是使用懒加载。过度使用懒加载反而会增加 HTTP 请求，降低首屏加载速度。
合理设置懒加载的阈值。 阈值是指图片距离视口多远时开始加载。如果阈值设置过小，会导致图片频繁加载，影响性能。如果阈值设置过大，会导致用户在滚动页面时，图片加载不及时，影响用户体验。
使用 CDN 加速图片加载。 CDN 可以将图片缓存到离用户更近的服务器上，提高图片加载速度。
对图片进行压缩和优化。 压缩图片可以减少图片的大小，提高加载速度。可以使用在线图片压缩工具，或者使用构建工具（例如 Webpack、Parcel）进行图片优化。
使用 HTTP/2 协议。 HTTP/2 协议支持多路复用，可以同时发送多个请求，提高页面加载速度。
使用 Service Worker 缓存图片。 Service Worker 可以缓存图片，减少 HTTP 请求，提高页面加载速度。

懒加载对 SEO 有影响吗？

懒加载可能会对 SEO 产生一定的影响。如果搜索引擎无法抓取到懒加载的图片，可能会影响页面的排名。为了避免这种情况，可以采取以下措施：

确保搜索引擎可以执行 JavaScript 代码。 搜索引擎需要执行 JavaScript 代码才能抓取到懒加载的图片。
使用 noscript 标签提供图片的备用方案。 如果搜索引擎无法执行 JavaScript 代码，可以使用 noscript 标签提供图片的备用方案。
```
@@##@@
<noscript>
  @@##@@
</noscript>
```
登录后复制
使用 Google 的 Lighthouse 工具测试懒加载的 SEO 效果。 Lighthouse 工具可以检测页面是否存在 SEO 问题，并提供优化建议。

总的来说，合理使用懒加载可以提高用户体验和页面性能，但需要注意 SEO 优化，确保搜索引擎可以抓取到懒加载的图片。