用 loading="lazy" 就够了，现代浏览器原生支持，与 Bootstrap 完全兼容；避免旧式 data-src + JS 方案，防止阻塞渲染和样式冲突；注意父容器 overflow/transform、图片宽高缺失及服务器响应问题。
用 loading="lazy" 就够了，别再写 JS 插件
Bootstrap 本身不提供懒加载功能，也不需要。现代浏览器原生支持 loading="lazy"，对 <img> 标签加这个属性就能触发懒加载，和 Bootstrap 完全兼容。
常见错误是以为必须配合 data-src + JS 初始化（比如旧版 LazyLoad 库），结果多写了逻辑、阻塞渲染、还和 Bootstrap 的响应式图片类（如 img-fluid）冲突。
- 只在明显“折叠以下”的图片上加，首屏图片不要加 —— 浏览器会主动加载首屏内容，加了反而可能延迟显示
-
<img src="..." loading="lazy" class="img-fluid">这样写完全没问题，img-fluid控制尺寸，loading控制加载时机，互不干扰 - Safari 从 v15.4+、Chrome 76+、Firefox 75+ 都已支持；IE 不支持，但 IE 用户本就不该用现代 Bootstrap（v5+ 已放弃 IE）
遇到 loading="lazy" 不生效？先查这三处
不是所有场景都自动生效，尤其在 Bootstrap 布局里容易踩坑。
- 父容器用了
overflow: hidden或transform（比如某些轮播组件、卡片阴影 hack），会破坏浏览器的滚动根计算，导致懒加载失效 —— 改成overflow: clip或移除 transform - 图片没设
height或aspect-ratio，页面流式重排时位置跳变，浏览器无法准确判断是否进入视口 —— 推荐配合style="aspect-ratio: 16/9;"或 CSSheight占位 - 服务器返回了
Content-Length: 0或空响应（比如路径错、权限问题），浏览器根本不会触发懒加载逻辑，而是直接报Failed to load resource—— 检查网络面板里的图片请求状态码
想兼容老浏览器？用 IntersectionObserver 而不是 jQuery 插件
如果真要支持 Firefox IntersectionObserver，而不是引入整个 lazysizes 或 lozad.js。
Bootstrap 的 DOM 结构干净，观察器能直接用：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
- 只监听有
data-src的图片，避免污染正常src - Bootstrap 的
img-thumbnail、rounded等类不影响 observer 行为 - 不用等
DOMContentLoaded，直接放<body>底部即可，比 jQuery 插件启动更快
为什么别在 background-image 上折腾懒加载
Bootstrap 里常用 bg-image 类或自定义 CSS 设置背景图，但 loading="lazy" 对 background-image 无效 —— 这是浏览器规范决定的，不是你代码写错了。
- CSS 背景图没有语义化加载控制机制，只能靠 JS 动态切换
style.backgroundImage，但会破坏 CSS 优先级和响应式断点逻辑 - 如果非要用背景图，建议改用
<img>+object-fit: cover替代：它支持loading="lazy"，也能实现相同视觉效果，且和col-md-6等栅格类天然兼容 - 第三方工具（如
lozad.js）声称支持背景图，其实是靠轮询getBoundingClientRect()，性能差、精度低、移动端卡顿明显
懒加载的核心是让浏览器自己决定何时取资源，而不是人肉模拟滚动检测。越靠近原生 API，越少出问题。
