Bootstrap本身不提供原生图片延迟加载能力，需手动实现或借助IntersectionObserver等第三方方案；其carousel组件默认加载所有图片，须用data-src配合事件钩子或观察者API按需加载。
Bootstrap 本身不提供原生图片延迟加载能力，必须配合 JavaScript 手动实现或借助第三方库（如 IntersectionObserver）——这是你踩坑前最该知道的事。
为什么 Bootstrap 的 carousel 需要手动加懒加载
Bootstrap 5.3 的轮播组件（carousel）默认会一次性加载所有 <img> 的 src，尤其在移动端或弱网环境下，首屏卡顿明显。官方未封装懒加载逻辑，只留了事件钩子供你介入。
- 首个轮播项的图片可保留
src正常加载，确保用户打开即见内容 - 其余项必须把真实地址写进
data-src，src留空或设为占位符（如data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==） - 监听
slid.bs.carousel事件，在每次切换完成后，用$(this).find('.active img[data-src]').attr('src', ...)补上真实地址 - 注意：若轮播自动播放且间隔短（如 3s），需防重复触发加载，建议加
data-loaded="true"标记已处理的图片
IntersectionObserver 替代 jQuery 方案更现代但有兼容性代价
用原生 IntersectionObserver 实现滚动懒加载，比 jQuery 绑定 scroll 事件性能更好、更节电，但 IE 完全不支持，Edge 10–12 也不行。
- 初始化时遍历所有带
data-src的<img>，为每个创建new IntersectionObserver实例（或复用单个实例） - 回调中判断
entry.isIntersecting为true时，赋值img.src = img.dataset.src，然后调用observer.unobserve(img)避免重复执行 - 若需兼容旧浏览器，得 fallback 到
getBoundingClientRect()+scroll监听，但务必节流（throttle或requestIdleCallback） - Bootstrap 5.3 自身无冲突，但若页面混用 BootstrapVue/BlazorBlazor，要注意它们内部是否已注册同名
IntersectionObserver实例
懒加载对 SEO 和用户体验的真实影响
Google 爬虫能识别 IntersectionObserver 加载的图片并索引，但前提是图片 URL 在 HTML 中可见（即写在 data-src 里）。纯 JS 拼接的 URL 不会被抓取。
- 优势：首屏时间（FCP）平均降低 30%–50%，移动端流量节省明显；
carousel切换更顺滑，尤其含高清图时 - 劣势：用户快速滚动可能看到空白占位，需配合适当的
loading="lazy"（仅 Chrome/Firefox 支持）或 CSS 骨架屏 - 风险点：若服务器返回 404 图片，
onerror事件里替换 fallback 图时，别再触发懒加载逻辑，否则形成死循环 - 特别注意：Bootstrap Icons 字体图标不适用此方案，应走
<link rel="preload">预加载，而非懒加载
真正难的是边界场景——比如轮播页签切换 + 用户手动拖拽 + 网络中断重试，这些地方容易漏掉 data-loaded 标记或 observer 清理，导致重复请求或图片不显示。动手前先想清楚你的降级路径和错误兜底。
