首页 > 试题广场 >

图片懒加载的实现方式（IntersectionObserve

[问答题]
图片懒加载的实现方式（IntersectionObserver/占位/预加载）与体验收益。
添加回答
DRZv头像 DRZv
1. 核心实现方式（简洁版） - IntersectionObserver（推荐）：监听图片与视口的交集，进入可视区域后加载（无需监听scroll，性能优）； - 占位+scroll监听：先设固定占位高度，监听scroll事件，通过getBoundingClientRect()判断图片是否进入视口，再加载； - 预加载：提前加载即将进入视口的图片（如滚动到第2屏时，预加载第3屏图片），常用作IntersectionObserver的补充。 2. 体验与性能收益 - 减少初始加载资源量，提升页面首屏加载速度； - 降低带宽消耗，尤其适配移动端/弱网环境； - 避免图片扎堆加载导致的页面卡顿，优化滚动流畅度； - 减少无效资源加载，降低服务器压力。
发表于 2025-11-03 06:52:59 回复(0)
已转码的钝角很开心头像 已转码的钝角很开心
intersectionobserve：->性能极好，浏览器高效处理 使用占位符，在真实图片前使用低质量占位->防止布局偏移，提供加载反馈 监听scroll和resize事件，在事件处理函数中判断图片是否进入可视区域->需要配合节流 预加载：滚动平滑，提前加载可视区下方
发表于 2026-02-22 14:43:55 回复(0)
WangYibo头像 WangYibo
图片懒加载是一种延迟加载页面可视区域外图片的技术，它通过减少首屏需要加载的资源，来显著提升页面加载速度，节省用户流量并且降低服务器压力。
发表于 2026-01-19 17:05:06 回复(0)
秋水夏树头像 秋水夏树
遍历图片节点。判断是否出现在视口。替换 src 为 data-src。
发表于 2025-09-17 19:26:25 回复(0)
提交观点

问题信息

来自：前端开发-牛客面经八股
难度：
4条回答 521浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号