图片懒加载是指延迟加载视口外的图片，以提升首屏加载速度并优化用户体验。1. 使用 loading="lazy" 属性实现原生懒加载，无需额外代码；2. 利用 intersection observer api 实现更灵活的控制，如预加载；3. 通过监听 scroll 事件判断图片是否进入视口，但性能较差；4. 使用第三方库如 lazyload 或 lozad.js 简化开发流程。为避免图片闪烁，需设置固定宽高、使用 aspect-ratio 属性或添加占位符。优化性能方面包括避免过度使用懒加载、合理设置加载阈值、使用 cdn 和 http/2、压缩图片及利用 service worker 缓存。seo 方面需确保搜索引擎可执行 javascript，或使用 noscript 标签提供备用方案，并可通过 lighthouse 工具检测优化效果。
图片懒加载，简单来说，就是页面上的图片不是一次性全部加载，而是当图片进入用户视口（或者说即将进入视口）时才进行加载。 这样可以显著提升首屏加载速度，优化用户体验，尤其是在图片较多的页面上。
图片懒加载优化方法
解决方案
实现图片懒加载的核心思路是：延迟加载视口外的图片。 具体方法有很多，下面列举几种常见的：
立即学习“前端免费学习笔记（深入）”；
-
使用
loading="lazy"属性（原生懒加载）这是最简单的方法，现代浏览器都支持
loading属性。只需要在<img>标签中添加loading="lazy"即可。<img src="image.jpg" loading="lazy" alt="Image description">
浏览器会自动处理图片的懒加载，无需编写额外的 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:
<img alt="Image description">
这种方法更加灵活，可以自定义加载时机，例如在图片进入视口前预先加载。
-
使用 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:
<img alt="Image description">
这种方法实现起来比较简单，但性能不如
Intersection Observer API，因为scroll事件触发频率很高。 -
使用第三方库
有很多成熟的 JavaScript 库可以帮助我们实现懒加载，例如：
- LazyLoad: 一个轻量级的懒加载库，使用简单，功能强大。
- lozad.js: 基于 Intersection Observer API 的懒加载库，性能优秀。
使用第三方库可以简化代码，提高开发效率。
如何选择合适的懒加载方法？
选择哪种懒加载方法取决于你的项目需求和技术栈。
如果你的项目只需要简单的懒加载，并且兼容性要求不高，可以使用
loading="lazy"属性。 这是最简单快捷的方法。如果需要更精细的控制，例如预加载、自定义加载时机等，可以使用
Intersection Observer API。 这种方法性能较好，也比较灵活。如果需要兼容旧版本浏览器，可以使用 JavaScript 监听
scroll事件。 但要注意性能优化，避免频繁触发scroll事件。如果希望快速实现懒加载，并且不想自己编写大量的 JavaScript 代码，可以使用第三方库。 选择一个成熟、可靠的库可以节省大量时间和精力。
懒加载后图片出现闪烁怎么办？
懒加载后图片出现闪烁通常是因为图片加载过程中，元素的高度塌陷，导致页面重新布局。 解决这个问题的方法是：
-
预先设置图片容器的宽高。 在
<img>标签上设置width和height属性，或者使用 CSS 设置容器的宽高。 这样可以防止图片加载过程中，元素的高度塌陷。<img alt="Image description" width="600" height="400">
-
使用 CSS
aspect-ratio属性。aspect-ratio属性可以设置元素的宽高比，浏览器会根据宽高比自动计算元素的高度。img { aspect-ratio: 3 / 2; /* 设置宽高比为 3:2 */ object-fit: cover; /* 保持图片比例，并填充整个容器 */ } -
使用占位符。 在图片加载完成之前，显示一个占位符，例如一个灰色方块或者一个加载动画。 这样可以防止页面重新布局，减少闪烁感。
<div class="image-container"> <img alt="Image description" onload="this.parentNode.classList.add('loaded')"> <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标签提供图片的备用方案。<img alt="Image description"> <noscript> <img src="image.jpg" alt="Image description"> </noscript>
使用 Google 的 Lighthouse 工具测试懒加载的 SEO 效果。 Lighthouse 工具可以检测页面是否存在 SEO 问题，并提供优化建议。
总的来说，合理使用懒加载可以提高用户体验和页面性能，但需要注意 SEO 优化，确保搜索引擎可以抓取到懒加载的图片。
