图片懒加载的核心实现方法有三种：1. 使用 data-src 属性 + 滚动监听；2. 使用 intersection observer api；3. 结合 requestanimationframe 优化滚动监听。此外，还可通过设置 offset 或 rootmargin 实现预加载，选择合适的占位图优化体验，并通过 onerror 处理加载失败问题，测试时可通过开发者工具的 network 面板观察图片是否按需加载。
图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户视口（或者即将进入）时才加载。这样可以显著提高页面初始加载速度，优化用户体验，特别是对于图片较多的页面。
解决方案
实现懒加载的核心在于：监听图片的 src 属性，当图片进入视口时，才将真实的图片地址赋给 src。
-
基础实现：data-src 属性 + 滚动监听
这是最常见的做法。首先，将图片的真实地址放到 data-src 属性中，src 属性留空或者放一张占位图。
@@##@@ @@##@@ @@##@@
然后，通过 JavaScript 监听滚动事件，判断图片是否进入视口。
const images = document.querySelectorAll('img[data-src]'); function loadImage(img) { img.src = img.dataset.src; img.removeAttribute('data-src'); // Optional: Remove data-src after loading } function isElementInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function checkImages() { images.forEach(img => { if (isElementInViewport(img)) { loadImage(img); } }); } document.addEventListener('scroll', checkImages); window.addEventListener('resize', checkImages); // Also check on resize checkImages(); // Initial check这种方法简单直接，但缺点是需要频繁监听滚动事件，可能会影响性能。
-
使用 Intersection Observer API
Intersection Observer API 是一种更高效的方式来监听元素是否进入视口，它基于浏览器的优化，避免了频繁的滚动监听。
const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; loadImage(img); observer.unobserve(img); // Stop observing after loading } }); }); images.forEach(img => { observer.observe(img); }); function loadImage(img) { img.src = img.dataset.src; img.removeAttribute('data-src'); }Intersection Observer API 性能更好，推荐使用。
-
结合 requestAnimationFrame 优化滚动监听
如果选择使用滚动监听，可以结合 requestAnimationFrame 来降低滚动事件的处理频率，提高性能。
let ticking = false; document.addEventListener('scroll', function(e) { if (!ticking) { window.requestAnimationFrame(function() { checkImages(); ticking = false; }); ticking = true; } });requestAnimationFrame 保证了回调函数在浏览器重绘之前执行，避免了不必要的计算。
-
预加载机制
有时候，我们希望图片在进入视口 之前 就开始加载，这样可以避免用户看到图片加载过程。 可以在 isElementInViewport 函数中增加一个 offset 值。
function isElementInViewport(el, offset = 100) { const rect = el.getBoundingClientRect(); return ( rect.top >= -offset && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }或者，使用 Intersection Observer API 的 rootMargin 选项。
const observer = new IntersectionObserver((entries, observer) => { ... }, { rootMargin: '100px 0px' // Top and bottom margins });rootMargin 可以控制触发 Intersection Observer 的边界。
如何选择合适的占位图？
选择占位图需要考虑以下几个因素：
- 大小： 占位图应该尽可能小，避免增加初始加载时间。可以使用纯色背景或者矢量图。
- 尺寸： 占位图的尺寸应该和真实图片的尺寸接近，避免页面布局跳动。
- 风格： 占位图的风格应该和页面整体风格一致，避免突兀感。
- 颜色： 可以使用图片的平均颜色作为占位图的颜色，或者使用模糊处理后的图片作为占位图。
一些常用的占位图方案包括：
- 纯色背景： 使用和图片主题颜色相近的纯色背景。
- 矢量图： 使用简单的矢量图形作为占位图。
- LQIP (Low Quality Image Placeholder)： 使用极低质量的图片作为占位图。
- SQIP (SVG-Based Image Placeholder)： 使用 SVG 版本的图片作为占位图。
懒加载图片加载失败了怎么办？
图片懒加载过程中，可能会因为网络问题或者其他原因导致图片加载失败。为了提高用户体验，需要处理图片加载失败的情况。
-
显示默认图片： 当图片加载失败时，显示一张默认图片。可以使用 onerror 事件来监听图片加载失败。
@@##@@
-
重试加载： 可以尝试重新加载图片。可以使用 setTimeout 函数来延迟一段时间后重新加载。
img.onerror = function() { setTimeout(() => { img.src = img.dataset.src; }, 3000); // Retry after 3 seconds }; -
错误提示： 可以显示错误提示信息，告诉用户图片加载失败。
如何测试懒加载是否生效？
测试懒加载是否生效，可以按照以下步骤进行：
- 打开开发者工具： 打开浏览器的开发者工具（通常按 F12 键）。
- 切换到 Network 面板： 在开发者工具中，切换到 Network 面板。
- 禁用缓存： 勾选 “Disable cache” 选项，确保每次加载都是从服务器获取资源。
- 清空记录： 点击 “Clear” 按钮，清空之前的网络请求记录。
- 滚动页面： 滚动页面，观察 Network 面板中的图片请求。
如果懒加载生效，应该只看到当前视口内的图片请求，而不是一次性加载所有图片。可以尝试快速滚动页面，观察图片是否按需加载。另外，可以观察图片的加载时间，如果加载时间过长，需要优化图片大小或者网络连接。还可以使用 Lighthouse 等工具来评估页面性能，并根据评估结果进行优化。
暂无评论内容