图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsettop和window.innerheight进行简单判断；2.使用getboundingclientrect优化可见性检测；3.利用intersection observer api异步监听元素可见性，性能更优；4.结合requestanimationframe优化滚动事件处理，避免页面卡顿。SEO优化可通过
图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户的可视区域时才加载。这样做可以显著提升页面加载速度，特别是当页面包含大量图片时。
解决方案
实现图片懒加载的核心在于监听图片的滚动事件，判断图片是否进入可视区域。 一旦图片进入可视区域，就将图片的src属性设置为真实的图片地址，从而触发图片的加载。
以下提供四种实现懒加载的技巧：
-
基于offsetTop和window.innerHeight的简单实现
这种方法是最基础的，通过比较图片距离页面顶部的距离(offsetTop)和窗口的内部高度(window.innerHeight)以及滚动条滚动的距离来判断图片是否可见。
function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); images.forEach(img => { if (img.offsetTop < window.innerHeight + window.scrollY) { img.src = img.dataset.src; img.removeAttribute('data-src'); // 防止重复加载 } }); } // 监听滚动事件 window.addEventListener('scroll', lazyLoad); // 页面加载完成时执行一次 document.addEventListener('DOMContentLoaded', lazyLoad);这个方法虽然简单，但效率相对较低，每次滚动都会遍历所有图片。
-
使用getBoundingClientRect优化判断
getBoundingClientRect方法可以获取元素相对于视口的位置信息，避免了计算offsetTop和scrollY的麻烦，也更准确。
function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); images.forEach(img => { const rect = img.getBoundingClientRect(); if (rect.top <= window.innerHeight && rect.bottom >= 0 && rect.left <= window.innerWidth && rect.right >= 0) { img.src = img.dataset.src; img.removeAttribute('data-src'); } }); } window.addEventListener('scroll', lazyLoad); document.addEventListener('DOMContentLoaded', lazyLoad);这种方法相对更高效，因为getBoundingClientRect是浏览器原生方法，性能较好。
-
利用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; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); // 停止监听已加载的图片 } }); }); images.forEach(img => { observer.observe(img); });Intersection Observer API的优势在于它是异步的，不会阻塞主线程，而且可以设置阈值，控制图片在进入可视区域多少比例时才加载。
-
结合requestAnimationFrame优化滚动事件处理
频繁的滚动事件处理可能会导致页面卡顿。 使用requestAnimationFrame可以将滚动事件处理函数推迟到下一次浏览器重绘之前执行，从而提高性能。
let ticking = false; function lazyLoad() { if (!ticking) { requestAnimationFrame(function() { // 上面的懒加载逻辑 ticking = false; }); ticking = true; } } window.addEventListener('scroll', lazyLoad); document.addEventListener('DOMContentLoaded', lazyLoad);requestAnimationFrame可以确保动画流畅，避免掉帧。
图片懒加载如何处理SEO优化？
懒加载虽然提升了用户体验，但也可能影响SEO。搜索引擎爬虫可能无法执行JavaScript，导致无法加载所有图片。解决办法：
-
使用 在
标签中使用
@@##@@ <noscript>@@##@@</noscript>
-
使用服务器端渲染（SSR）： 在服务器端渲染页面，确保搜索引擎爬虫可以获取完整的html内容，包括所有图片。
-
使用Google推荐的懒加载方式： Google推荐使用loading=”lazy”属性，这是一个浏览器原生的懒加载属性，搜索引擎可以识别。
@@##@@
如何处理懒加载图片的占位问题？
在图片加载完成之前，需要为图片预留空间，避免页面布局发生跳动。常见的做法：
-
使用固定宽高： 为
标签设置固定的宽度和高度。
-
使用css aspect-ratio属性： 设置图片的宽高比，让浏览器自动计算高度。
img { aspect-ratio: 16 / 9; /* 设置宽高比 */ object-fit: cover; /* 图片填充方式 */ } -
使用占位符图片： 使用低分辨率的占位符图片，在图片加载完成后替换为高清图片。
如何选择合适的懒加载实现方式？
选择哪种懒加载实现方式取决于项目的具体需求和兼容性要求。
- 简单项目或需要兼容旧版本浏览器： 可以选择基于offsetTop或getBoundingClientRect的实现方式。
- 现代项目且对性能要求较高： 推荐使用Intersection Observer API。
- 需要更精细的控制和优化： 可以结合requestAnimationFrame来处理滚动事件。
- 如果主要目标是提升Lighthouse得分，且没有兼容性问题： 直接使用loading=”lazy”属性。
总之，选择合适的懒加载实现方式需要综合考虑性能、兼容性和SEO等因素。
