答案是使用intersection observer实现图片懒加载。1. 用data-src属性存放真实图片地址，src指向占位图；2. 通过javascript创建intersection observer实例，监听图片元素进入视口的状态；3. 当元素进入视口（配合rootmargin提前加载）时，将data-src的值赋给src，触发图片加载，并停止观察该元素；4. 对不支持的浏览器降级处理，直接加载图片。该方案避免了scroll事件导致的性能问题，利用浏览器原生异步机制，提升页面流畅度和用户体验，且可扩展应用于无限滚动、广告曝光、动画触发等多种场景，是当前最优雅高效的解决方案。
图片懒加载，尤其是在现代前端开发中，早已不是什么新鲜事，但如何优雅高效地实现它，却是个值得深思的问题。我的答案很简单：用
Intersection Observer
。它几乎是目前最现代、性能最优的解决方案，能让你的页面在用户体验和加载速度上都迈上一个新台阶。
解决方案
实现图片懒加载，核心思路就是让图片在进入用户视口之前不加载，或者只加载一个轻量级的占位符。
Intersection Observer
API 提供了浏览器原生级别的支持，可以异步观察目标元素与祖先元素或文档视口之间的交叉状态。
首先，HTML 部分，我们不再直接使用
src
属性，而是用
data-src
来存放图片的真实地址，并可以添加一个低分辨率的占位图或
loading
动画。
立即学习“前端免费学习笔记（深入）”；
CSS 部分，其实可以很简单，或者根据你的需求做一些加载动画。这里我们先保持简单。
.lazyload-img { display: block; /* 确保图片独占一行，方便观察 */ width: 100%; /* 示例：图片宽度 */ min-height: 200px; /* 示例：给个最小高度，避免布局跳动 */ background-color: #f0f0f0; /* 占位背景色 */}
关键在于 JavaScript。我们需要创建一个
Intersection Observer
实例，并给它一个回调函数，当图片进入视口时，这个回调函数就会被触发。
document.addEventListener('DOMContentLoaded', () => { const lazyImages = document.querySelectorAll('.lazyload-img'); if ('IntersectionObserver' in window) { let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute('data-src'); if (src) { img.src = src; img.removeAttribute('data-src'); // 加载完成后移除data-src observer.unobserve(img); // 停止观察已加载的图片 } } }); }, { rootMargin: '0px 0px 200px 0px', // 提前200px加载 threshold: 0 // 只要有一个像素可见就触发 }); lazyImages.forEach(img => { observer.observe(img); }); } else { // Fallback for browsers that don't support Intersection Observer // 这部分可以考虑使用滚动事件或者直接加载所有图片 lazyImages.forEach(img => { const src = img.getAttribute('data-src'); if (src) { img.src = src; img.removeAttribute('data-src'); } }); }});
这段代码的核心逻辑是：当
lazyload-img
元素进入（或即将进入）视口时，
Intersection Observer
会通知我们，然后我们取出
data-src
中的真实图片地址，赋值给
src
属性，图片就开始加载了。加载完成后，我们会让观察器停止观察这个元素，避免重复操作，也节省资源。
为什么说Intersection Observer是图片懒加载的终极答案？
说实话，我个人是真受够了那些基于滚动事件的图片懒加载方案。过去，我们为了实现懒加载，不得不监听
scroll
事件，然后在回调里不断计算每个图片元素距离视口顶部的距离，判断它们是否进入了可视区域。这听起来似乎没什么问题，但实际操作起来，性能简直是噩梦。想想看，每次滚动都触发大量的
getBoundingClientRect()
调用，这会导致浏览器频繁地进行布局计算（layout thrashing），页面卡顿、掉帧是家常便饭，用户体验直线下降。尤其是在移动设备上，资源有限，这种性能开销更是雪上加霜。
Intersection Observer
的出现，彻底改变了这种局面。它不是基于同步的滚动事件来判断的，而是利用浏览器内部的优化机制，异步地观察元素交叉状态。这意味着什么？意味着你的 JavaScript 不再需要自己去计算位置，浏览器会在合适的时机，以最高效的方式告诉你“嘿，这个元素现在可见了！”或者“它已经离开了！”。它运行在主线程之外，不会阻塞页面的渲染，极大地提升了滚动性能和用户体验。从我个人的开发经验来看，一旦用上了
Intersection Observer
，那些恼人的性能瓶颈几乎瞬间消失，页面滚动变得异常流畅。它就像是浏览器为你量身定制的一个“智能管家”，帮你默默处理这些繁琐又耗性能的判断逻辑，让你能更专注于业务逻辑的实现。
Intersection Observer的配置参数有哪些实用技巧？
Intersection Observer
的强大之处，除了其异步和高性能的特性外，还在于它提供了几个非常灵活的配置参数，让你能精准控制观察行为。理解并善用它们，能让你的懒加载方案更加精细化。
首先是
root
参数。它决定了观察器所观察的目标元素与哪个容器进行交叉。默认情况下，
root
是浏览器视口（
null
或
undefined
）。但如果你有一个可以滚动的特定区域，比如一个弹窗内的图片列表，你可以将
root
设置为那个可滚动的元素。这样，图片只有在进入那个特定容器的可见区域时才会加载，而不是整个浏览器视口。这在组件化开发中尤其有用，避免了不必要的全局观察。
多个微信小程序源码合集
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的“组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
0 查看详情
然后是
rootMargin
，这个参数我个人觉得是懒加载场景下最实用的一个。它允许你为
root
元素（通常是视口）增加或减少一个边距。比如，设置
'0px 0px 200px 0px'
，就意味着当图片距离视口底部还有 200 像素时，它就会被视为“进入视口”并开始加载。这就像是给懒加载图片设置了一个“预加载区域”。用户还没滚动到图片位置，图片就已经悄悄加载好了，避免了用户在滚动时看到图片突然出现的突兀感，极大地提升了用户感知的加载速度和流畅度。你可以根据页面内容和用户习惯，灵活调整这个值。太小可能还是会闪现，太大则失去了懒加载的意义，加载了太多不必要的资源。
最后是
threshold
，这个参数定义了一个或多个阈值，表示目标元素可见部分的百分比。当目标元素的可见比例达到这些阈值时，观察器的回调函数就会被触发。它是一个数组，可以包含多个值，例如
[0, 0.5, 1]
。
0
表示只要目标元素有一个像素可见就触发回调；
0.5
表示当目标元素一半可见时触发；
1
表示当目标元素完全可见时触发。在图片懒加载场景下，我通常会设置
threshold: 0
，配合
rootMargin
，确保图片能尽早加载，避免空白区域。但如果你想实现一些更复杂的交互，比如当图片完全进入视口才播放动画，那么
threshold: 1
就很有用。
通过这三个参数的组合使用，
Intersection Observer
提供了非常强大的灵活性，让你可以根据具体的业务需求和性能目标，定制出最合适的懒加载策略。
除了图片懒加载，Intersection Observer还能用在哪些场景？
Intersection Observer
的应用远不止图片懒加载这么简单。它的核心能力是高效地检测元素与容器的交叉状态，这使得它在许多需要“元素可见性”判断的场景中都表现出色。
一个非常常见的场景是无限滚动（Infinite Scrolling）。当用户滚动到页面底部时，我们通常需要加载更多内容。使用
Intersection Observer
，你只需要观察一个位于页面底部的“加载更多”元素。当这个元素进入视口时，就触发数据加载请求，然后将新内容添加到页面中。这比传统的监听滚动事件并计算滚动距离的方式要简洁和高效得多。我个人在做内容型网站时，几乎都会用它来实现无缝的内容加载体验。
广告可见性检测也是一个重要的应用。对于广告商来说，了解广告是否真正被用户看到，以及被看到多久，是衡量广告效果的关键指标。
Intersection Observer
可以精确地检测广告元素在视口中的可见性百分比和持续时间，从而提供更准确的广告曝光数据。这对于广告平台和内容发布者都非常有价值。
再比如，实现“粘性”元素（Sticky Elements）。虽然 CSS
position: sticky
已经很方便，但在一些需要更复杂逻辑的场景，或者需要兼容旧浏览器时，
Intersection Observer
可以用来判断某个元素何时进入或离开特定区域，然后通过 JavaScript 动态添加或移除 CSS 类，从而实现吸顶、吸底等效果。
它还能用于视频的自动播放/暂停。当视频元素进入视口时自动播放，离开视口时暂停，可以节省带宽并提升用户体验。同样，动画的触发也可以通过它实现，当元素进入视口时才播放动画，避免了页面加载时所有动画都立即执行，导致性能负担。
甚至在数据分析和用户行为追踪方面，
Intersection Observer
也能发挥作用。你可以用它来跟踪用户是否看到了某个特定的 CTA（Call To Action）按钮，或者用户滚动到了文章的哪个部分，这些数据对于优化产品设计和内容策略都非常有帮助。
总而言之，任何需要判断“一个元素是否在另一个元素（通常是视口）中可见”的场景，
Intersection Observer
都是一个优雅且高性能的解决方案。它极大地简化了前端开发中这类交互的实现，让我们可以构建更流畅、更智能的网页应用。
以上就是CSS怎样实现图片懒加载？intersection observer应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1090824.html
微信扫一扫 
支付宝扫一扫 
