HTML5原生不支持\_lazyload属性，仅loading="lazy"为标准方案，适用于img和iframe；自定义属性如data-src需JS手动实现懒加载。
HTML5 原生不支持 _lazyload 属性——它根本不是标准属性，浏览器会直接忽略，加了也无效。
为什么加 _lazyload 没反应？
这是常见误解：把第三方库（比如 jQuery Lazy Load）的自定义写法或旧插件约定，误当成 HTML5 标准。HTML5 规范中只有 loading 属性支持原生懒加载，且仅作用于 元素。
-
_lazyload、data-lazy、data-src等全是开发者自定义的钩子，需配合 JS 手动解析和替换 - 浏览器不会因为写了
_lazyload="true"就自动延迟加载图片 - 若用框架（如 Vue/React），这类属性更需在组件逻辑里显式处理，否则只是无意义字符串
loading="lazy" 的正确用法与限制
这是唯一被 Chrome、Firefox、Edge（≥79）、Safari（≥15.4）广泛支持的原生方案，但有明确边界：
- 只对
src或srcset（不能空着等 JS 填） - 只对「在视口下方一定距离内」的图片生效；顶部首屏图片仍会立即加载
- 不支持背景图（
background-image）、content插入的图片 - 服务端渲染（SSR）时若禁用 JS，该属性仍有效；但若图片 URL 本身不可访问，会显示破图而非占位
@@##@@ @@##@@
想用 data-src + JS 懒加载？关键三步不能少
当需要兼容老浏览器、处理背景图、或实现更精细控制（如加载前淡入、错误 fallback）时，data-src 是事实标准。但必须配 JS 主动接管：
立即学习“前端免费学习笔记（深入）”；
- 初始 HTML 中移除
src，把真实地址存进data-src：@@##@@
- 用
IntersectionObserver 监听进入视口，而非轮询getBoundingClientRect() - 加载成功后，把
data-src值赋给src，并移除监听（避免重复触发） - 务必加
error事件监听，防止图片 404 导致空白
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('js-lazy');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
真正要警惕的是：别在没 JS 支持的环境（如部分邮件客户端、爬虫）里依赖 data-src 方案，那里的图片将完全不显示。原生 loading="lazy" 至少能降级为正常加载，而自定义属性毫无兜底能力。
