图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsettop和window.innerheight进行简单判断；2.使用getboundingclientrect优化可见性检测；3.利用intersection observer api异步监听元素可见性，性能更优；4.结合requestanimationframe优化滚动事件处理，避免页面卡顿。seo优化可通过<noscript>标签、服务器端渲染或使用loading="lazy"属性实现。图片加载前应预留空间，防止布局抖动，可通过固定宽高、css aspect-ratio属性或低分辨率占位图实现。选择实现方式需综合考虑项目需求、兼容性及性能优化目标。
图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户的可视区域时才加载。这样做可以显著提升页面加载速度，特别是当页面包含大量图片时。
解决方案
实现图片懒加载的核心在于监听图片的滚动事件，判断图片是否进入可视区域。 一旦图片进入可视区域，就将图片的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>标签提供备用图片： 在<img>标签中使用<noscript>标签，当JavaScript不可用时，显示备用图片。<img alt="Image Description"> <noscript><img src="image.jpg" alt="Image Description"></noscript>
使用服务器端渲染（SSR）： 在服务器端渲染页面，确保搜索引擎爬虫可以获取完整的HTML内容，包括所有图片。
-
使用Google推荐的懒加载方式： Google推荐使用
loading="lazy"属性，这是一个浏览器原生的懒加载属性，搜索引擎可以识别。<img src="image.jpg" loading="lazy" alt="Image Description">
如何处理懒加载图片的占位问题？
在图片加载完成之前，需要为图片预留空间，避免页面布局发生跳动。常见的做法：
使用固定宽高： 为
<img>标签设置固定的宽度和高度。-
使用CSS
aspect-ratio属性： 设置图片的宽高比，让浏览器自动计算高度。img { aspect-ratio: 16 / 9; /* 设置宽高比 */ object-fit: cover; /* 图片填充方式 */ } 使用占位符图片： 使用低分辨率的占位符图片，在图片加载完成后替换为高清图片。
如何选择合适的懒加载实现方式？
选择哪种懒加载实现方式取决于项目的具体需求和兼容性要求。
-
简单项目或需要兼容旧版本浏览器： 可以选择基于
offsetTop或getBoundingClientRect的实现方式。 -
现代项目且对性能要求较高： 推荐使用
Intersection Observer API。 -
需要更精细的控制和优化： 可以结合
requestAnimationFrame来处理滚动事件。 -
如果主要目标是提升Lighthouse得分，且没有兼容性问题： 直接使用
loading="lazy"属性。
总之，选择合适的懒加载实现方式需要综合考虑性能、兼容性和SEO等因素。
