答案：图片懒加载通过延迟非关键图片的加载，显著提升页面初始加载速度、节省流量并改善用户体验。实现方式首选原生loading=”lazy”，兼容性不足时使用Intersection Observer API，其通过监听元素进入视口触发加载，性能优于传统scroll事件监听。需注意布局抖动、首屏加载、SEO及动态内容等挑战，合理设置占位符、预加载关键资源，并处理响应式图片属性以确保最佳效果。
实现图片懒加载，说白了，就是别一股脑儿把页面上所有图片都加载了。只加载那些用户当前能看到或者即将看到的图片，剩下的等用户滚动到相应位置再加载。这对于提升网页的初始加载速度、节省用户流量，尤其是移动端用户，简直是立竿见影的优化手段。用JavaScript来搞定这事儿，最优雅、最现代的办法，非
Intersection Observer
莫属。它能帮你高效地监测元素是否进入了视口，省去了自己监听滚动事件、计算位置的麻烦。
解决方案
图片懒加载的核心思想是：页面加载时，图片不直接使用
src
属性加载图片源，而是将图片地址存放在一个自定义属性（比如
data-src
）中。当图片进入用户视口时，再用JavaScript把
data-src
的值赋给
src
，从而触发图片加载。
这里我们主要使用
Intersection Observer
API来实现：
HTML 结构准备：给需要懒加载的图片添加一个特定的类名（比如
lazy-img
），并把真实的图片地址放在
data-src
属性里。
src
属性可以放一个占位符图片（比如一个小的、透明的GIF，或者一个loading图），或者干脆留空。同时，为了避免图片加载时的布局抖动（CLS问题），最好给图片设置
width
和
height
属性，或者通过CSS预留好空间。
JavaScript 逻辑：创建一个
Intersection Observer
实例，遍历所有带有
lazy-img
类的图片，并将它们添加到观察器中。当图片进入视口时，回调函数会触发，我们将
data-src
赋值给
src
，然后停止观察该图片。
document.addEventListener("DOMContentLoaded", function() { const lazyImages = document.querySelectorAll('img.lazy-img'); // 检查浏览器是否支持 Intersection Observer if ('IntersectionObserver' in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // 当元素进入视口时 let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; // 将data-src赋值给src // 如果有data-srcset，也一并处理 if (lazyImage.dataset.srcset) { lazyImage.srcset = lazyImage.dataset.srcset; } lazyImage.classList.remove('lazy-img'); // 移除懒加载类名 observer.unobserve(lazyImage); // 停止观察该图片，避免重复加载 } }); }, { // root: null, // 默认是视口 // rootMargin: '0px 0px 100px 0px', // 提前100px加载，优化用户体验 threshold: 0.01 // 元素有一点点进入视口就触发 }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); // 观察每个懒加载图片 }); } else { // 浏览器不支持 Intersection Observer 的降级处理 // 比如直接加载所有图片，或者使用传统的 scroll/resize 事件监听 console.warn("Intersection Observer is not supported. All images will be loaded directly."); lazyImages.forEach(function(lazyImage) { lazyImage.src = lazyImage.dataset.src; if (lazyImage.dataset.srcset) { lazyImage.srcset = lazyImage.dataset.srcset; } lazyImage.classList.remove('lazy-img'); }); }});
这段代码的核心是
IntersectionObserver
。它会异步地观察目标元素与祖先元素或顶级文档视口（
viewport
）的交叉状态。当交叉状态发生变化时，会执行回调函数。
isIntersecting
属性就是判断元素是否进入了视口。
rootMargin
参数可以让你设置一个“提前量”，比如在图片距离视口还有100px的时候就开始加载，这样用户滚动起来会感觉更流畅，图片不会突兀地出现。
立即学习“Java免费学习笔记（深入）”；
为什么图片懒加载对网站性能和用户体验如此重要？
说起来，图片懒加载这事儿，初衷就是为了让网站“跑得更快，看得更爽”。它带来的好处是多方面的，不仅仅是速度那么简单。
首先，最直观的，就是显著提升页面的初始加载速度。想象一下，一个页面有几十张甚至上百张图片，如果一股脑儿全加载了，那带宽消耗和请求数量是巨大的。浏览器需要处理这些请求，解析图片数据，这会阻塞渲染，导致用户看到一个空白页或者加载缓慢的页面。懒加载只加载首屏图片，大大减少了首次请求的资源量，让用户能更快地看到内容，这直接影响了用户对网站的第一印象。
其次，它节省了用户的流量。尤其是对于移动端用户，流量是有限的。如果用户只是看了一部分内容就离开了，那些没滚到的图片就没必要加载，这无疑是为用户省钱。从网站运营的角度看，这也降低了服务器的带宽成本。
再者，懒加载对改善用户体验至关重要。一个加载快的网站，用户等待时间短，心情自然好。而如果页面卡顿、图片半天出不来，用户很容易就失去耐心，直接关掉页面。此外，懒加载有助于减少页面的“布局抖动”（Layout Shift），也就是图片加载后撑开空间，导致页面内容跳动。通过预留图片空间或者使用占位符，可以有效缓解这个问题，这在Google的Core Web Vitals中，是衡量用户体验的重要指标（Cumulative Layout Shift, CLS）。
最后，别忘了对SEO的潜在积极影响。搜索引擎越来越重视用户体验和页面性能。一个加载速度快、用户体验好的网站，更有可能获得更高的搜索排名。虽然搜索引擎爬虫现在也能执行JavaScript，但如果能让它们更快地获取到核心内容，总是件好事。所以，懒加载不仅仅是技术优化，更是用户体验和业务增长的策略。
除了Intersection Observer，还有哪些实现懒加载的方式？它们各自的优缺点是什么？
其实在
Intersection Observer
出现之前，大家为了实现懒加载，也是绞尽脑汁。现在回过头看，那些方法各有特点，但大多不如
Intersection Observer
优雅和高效。
传统的
scroll
/
resize
事件监听
实现方式： 这是最原始的方法。通过监听
window
的
scroll
和
resize
事件，在事件触发时，遍历所有待加载的图片，计算它们相对于视口的位置。如果图片顶部或底部进入了视口范围，就加载它。优点： 兼容性非常好，几乎所有浏览器都支持。理解起来也相对直观。缺点： 性能问题是最大的痛点。
scroll
事件触发非常频繁，每次触发都可能需要进行大量的DOM操作（获取元素位置、计算），这会导致主线程繁忙，页面卡顿，甚至出现“掉帧”现象。为了缓解这个问题，通常需要配合
debounce
（防抖）或
throttle
（节流）来限制事件的触发频率，但即便如此，也难以达到
Intersection Observer
的效率。代码也相对复杂，需要自己处理各种边界情况和计算逻辑。
loading="lazy"
原生属性
实现方式： 这是HTML5新增的一个属性，直接在
或
标签上添加
loading="lazy"
即可。浏览器会原生处理懒加载逻辑。
优点： 极其简单，一行代码搞定，无需任何JavaScript。性能最优，因为是浏览器底层实现，可以更好地优化资源调度。对开发者来说，维护成本几乎为零。缺点： 兼容性是其主要限制。虽然现代浏览器（Chrome, Firefox, Edge等）支持度越来越好，但仍然有部分浏览器或旧版本浏览器不支持。这意味着如果你的目标用户群体包含这些浏览器，你可能需要一个JavaScript的降级方案。另外，浏览器对于“何时加载”的判断是内置的，开发者无法像
Intersection Observer
那样精细控制加载的时机（比如提前多少像素加载）。
Intersection Observer
API (再次强调其优势)
实现方式： 如解决方案部分所述，通过创建
Intersection Observer
实例来观察目标元素与视口的交叉状态。优点：性能卓越： 异步执行，不阻塞主线程，避免了
scroll
事件带来的性能问题。效率高： 浏览器内部优化，能更高效地检测元素可见性。API简洁： 相比自己写
scroll
监听和位置计算，代码量更少，逻辑更清晰。可配置性强： 可以通过
root
、
rootMargin
、
threshold
等参数精细控制观察范围和触发时机。语义化： 专门为解决这类问题而设计。缺点： 兼容性不如
scroll
事件，IE浏览器不支持。对于需要支持IE等老旧浏览器的项目，可能需要引入
Intersection Observer
的Polyfill。
综合来看，
loading="lazy"
是首选，如果兼容性允许，直接用它最省事。如果需要更精细的控制或者要兼容不支持
loading="lazy"
的现代浏览器，那么
Intersection Observer
是最佳选择。至于传统的
scroll
事件监听，现在基本上只作为
Intersection Observer
的降级方案，或者在极少数特定场景下才会考虑。
在实际项目中实现图片懒加载时，可能会遇到哪些常见问题和挑战？
实际落地图片懒加载，听起来简单，但真上手了，总会遇到一些意料之外的“坑”。这就像盖房子，图纸画得再好，施工时总有各种小状况。
布局抖动（Layout Shift）问题这是最常见也最影响用户体验的问题之一。如果懒加载的图片没有预设宽度和高度，当它们加载出来时，会突然占据空间，导致页面下方的内容向下“跳动”。这不仅让用户感到不适，还会影响Core Web Vitals中的CLS（Cumulative Layout Shift）指标。
应对策略： 始终为图片设置
width
和
height
属性，或者通过CSS为图片容器预留足够的空间（例如使用
aspect-ratio
属性或
padding-bottom
技巧）。这样，即使图片还没加载，页面布局也已经稳定了。
首屏图片加载延迟有时候，页面顶部的一些图片，虽然在视口内，但如果也设置了懒加载，可能会导致它们在页面渲染初期没有及时显示，用户看到的是占位符，体验反而下降。
应对策略： 对首屏关键图片不使用懒加载。直接使用
src
属性加载它们，或者给这些图片设置
loading="eager"
（如果使用了原生懒加载）。你甚至可以结合
fetchpriority="high"
或
来进一步优化这些关键图片的加载优先级。
搜索引擎优化（SEO）的顾虑过去，搜索引擎爬虫对JavaScript的执行能力有限，可能会忽略
data-src
中的图片。虽然现在主流搜索引擎的爬虫已经很强大，能执行JavaScript，但为了确保万无一失，还是有些地方要注意。
应对策略： 确保
data-src
中的URL是可访问的。对于非常重要的图片，可以考虑不懒加载。另外，提供
alt
属性是必须的，它能帮助搜索引擎理解图片内容。如果担心，也可以在
noscript
标签中提供一个非JS版本的图片链接，作为备用方案。
动态内容或单页应用（SPA）中的处理在SPA或有大量动态加载内容的网站中，新的图片元素可能会在页面初始化之后才被添加到DOM中。如果只在
DOMContentLoaded
时初始化
Intersection Observer
，这些新图片就不会被观察到。
应对策略： 在动态添加图片到DOM之后，需要重新调用
Intersection Observer
的
observe()
方法来观察这些新元素。或者，你可以创建一个通用的函数来初始化观察器，并在每次DOM更新后调用它。
浏览器兼容性
Intersection Observer
在现代浏览器中支持良好，但对于IE等老旧浏览器则不兼容。
应对策略： 引入
Intersection Observer
的Polyfill。例如，可以从CDN加载或者通过npm安装
intersection-observer
库。在不支持的浏览器中，也可以选择直接加载所有图片作为降级方案，或者回退到传统的
scroll
事件监听（但要做好性能优化）。
用户体验细节：占位符和加载指示在图片加载完成前，用户看到的是什么？一个空白区域，还是一个有意义的占位符？这会影响用户感知。
应对策略： 使用低质量图片占位符（LQIP）、模糊效果占位符（如
Blurhash
）或纯色占位符，这样在图片加载前，用户也能看到一些视觉元素。同时，可以添加一个加载中的指示器（loading spinner），明确告诉用户图片正在加载。
图片
srcset
和
sizes
属性的处理如果你的图片使用了响应式图片技术（
srcset
和
sizes
），懒加载时也需要一并处理。
应对策略： 将
srcset
和
sizes
的值也存放在
data-srcset
和
data-sizes
等自定义属性中，在图片进入视口时，一并赋值给
srcset
和
sizes
属性。
处理好这些挑战，才能让图片懒加载真正发挥其优化作用，而不是带来新的问题。这需要开发者在设计和实现时，多一份细心和考量。
以上就是怎么使用JavaScript实现图片懒加载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/66197.html
微信扫一扫 
支付宝扫一扫 
