图片懒加载通过延迟加载非首屏图片提升页面性能。具体方案有三种：1.基于scroll事件监听，通过判断图片是否进入视窗加载图片，但需优化触发频率；2.使用intersection observer api实现异步监听，性能更优；3.使用loading=”lazy”属性原生支持。此外，占位图应与实际图片尺寸一致并采用低质量图片或css渐变设计。加载失败时应显示默认图、支持重试及错误提示，并监控上报错误。对SEO影响方面，应确保搜索引擎可抓取图片，合理使用alt属性并配合cdn加速。
图片懒加载，简单来说，就是先不加载那些不在用户当前视窗内的图片，等到它们快要进入视窗时再加载。这样做可以大幅减少页面初始加载时的http请求数量，加快页面渲染速度，提升用户体验。
解决方案
实现图片懒加载的核心思路就是：延迟加载。具体来说，就是先把标签的src属性设置为空，然后将真实的图片地址放到一个自定义属性中，比如data-src。当页面滚动时，通过JavaScript判断图片是否进入视窗，如果进入，就把data-src的值赋给src，这样图片就开始加载了。
这里提供三种常用的实现方案：
-
基于scroll事件监听
这是最传统的做法。监听window的scroll事件，每次滚动时都检查是否有图片进入视窗。
const images = document.querySelectorAll('img[data-src]'); function lazyLoad() { images.forEach(img => { if (isInViewport(img) && img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); // 防止重复加载 } }); } function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 页面加载完成时执行一次，防止首屏图片未加载 lazyLoad(); window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); // 监听resize事件，防止窗口大小变化导致图片显示问题这种方案的缺点是scroll事件触发频率很高，如果页面图片很多，会频繁执行lazyLoad函数，可能导致性能问题。可以考虑使用throttle或debounce来优化。
-
使用Intersection Observer API
这是更现代、更高效的方案。Intersection Observer可以监听元素是否进入视窗，而且是异步的，不会阻塞主线程。
const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); // 加载完成后停止观察 } }); }); images.forEach(img => { observer.observe(img); });这种方案的优点是性能更好，而且代码更简洁。
-
配合loading=”lazy”属性
现代浏览器已经原生支持loading=”lazy”属性，可以直接在
标签上使用，无需编写任何JavaScript代码。
@@##@@
这种方案最简单，但兼容性可能存在问题，需要根据实际情况选择。
副标题1
图片懒加载的占位图应该如何设计？
占位图的作用是在图片加载完成之前，先显示一个临时的图片，防止页面出现空白。占位图的设计直接影响用户体验。
- 颜色和尺寸: 占位图的颜色应该与页面背景色相近，尺寸应该与实际图片一致，避免页面布局发生跳动。
- 使用低质量图片: 可以使用实际图片的低质量版本作为占位图，这样用户至少可以看到图片的轮廓。
- 使用SVG占位符: 使用SVG可以创建简单的矢量图形作为占位符，体积小，不会影响页面加载速度。
- 使用css渐变: 使用CSS渐变可以创建平滑的颜色过渡效果，作为占位图，视觉效果更好。
选择哪种方案取决于具体的需求和设计风格。
副标题2
如何处理懒加载图片加载失败的情况？
图片加载失败是很常见的问题，必须妥善处理，否则会影响用户体验。
- 显示默认图片: 可以设置一个默认图片，当图片加载失败时，显示这个默认图片。
- 重试加载: 可以尝试重新加载图片，但要避免无限循环加载。可以设置一个最大重试次数。
- 显示错误信息: 可以显示错误信息，提示用户图片加载失败。
- 监控错误: 使用onerror事件监听图片加载错误，并上报到监控系统，方便排查问题。
错误处理是保证用户体验的重要环节，不可忽视。
副标题3
懒加载对SEO有什么影响？如何优化？
懒加载虽然可以提升用户体验，但也可能对SEO产生负面影响。如果搜索引擎无法抓取到懒加载的图片，可能会影响网站的排名。
- 确保搜索引擎可以抓取图片: 确保搜索引擎可以执行JavaScript代码，或者提供noscript标签，包含图片的真实地址。
- 使用loading=”lazy”属性: 搜索引擎通常可以识别loading=”lazy”属性，并正确抓取图片。
- 优化图片大小: 优化图片大小可以减少加载时间，提升SEO效果。
- 使用CDN: 使用CDN可以加速图片加载速度，提升SEO效果。
- 使用正确的alt属性: 为图片添加正确的alt属性，方便搜索引擎理解图片内容。
总而言之，懒加载需要谨慎使用，并进行适当的优化，才能保证SEO效果。
