最稳妥做法是css默认隐藏图片（如.js-lazy-load{display:none}），再通过img.onload事件控制显示，同时必须绑定onerror处理失败，并避免仅依赖loading="lazy"或js禁用场景。
图片加载完成前先隐藏，用 CSS 控制初始状态
直接在 <img> 标签上加 style="max-width:90%" 或通过 class 隐藏，是最简单可控的起点。但注意：不能只靠 JS 等 onload 再显示——如果用户禁用 JS，图片就永远不出现；也不能用 visibility: hidden，它仍占布局空间，可能造成页面跳动。
推荐做法是给图片加一个类（如 js-lazy-load），并在 CSS 中默认隐藏：
.js-lazy-load {
display: none;
}
这样既保证无 JS 时可降级（后续再补 fallback），又避免布局抖动。
监听 img.onload 而不是 window.onload
window.onload 要等所有资源（含 CSS、JS、iframe）都加载完才触发，而图片往往早于它们就绪。对单张关键图，直接绑定其 onload 更快、更精准。
实操要点：
- 必须在设置
src之前 绑定onload，否则可能因缓存导致事件丢失 - 要同时处理
onerror，防止 404 图片卡住不显示 - 现代写法可用
addEventListener('load', ...)，但需确保 DOM 已就位（比如放在底部或用DOMContentLoaded包裹）
示例：
@@##@@
<script>
const img = document.getElementById('hero-img');
img.addEventListener('load', () => img.style.display = 'block');
img.addEventListener('error', () => {
img.style.display = 'none';
console.warn('图片加载失败:', img.src);
});
</script>
用 loading="lazy" 时要注意兼容性和触发时机
原生懒加载属性 loading="lazy" 本身不控制“是否显示”，它只影响浏览器何时发起请求。很多开发者误以为加了它就能实现“加载完再显示”，结果发现图片还是闪一下才出来——这是因为浏览器默认会先占位、再替换。
若想配合懒加载一起做平滑显示，得手动干预：
- 保留
loading="lazy"减少首屏请求数 - 仍需监听
load事件来控制显隐 - 注意 Safari 对
loading="lazy"支持较晚（iOS 15.4+），旧版本会忽略该属性，回退为正常加载
所以不能只依赖这个属性来实现“加载完再显示”，它只是优化手段，不是显示逻辑本身。
图片加载完成但未渲染？检查是否被 CSS 强制重绘阻塞
即使 onload 触发、display 改为 block，有时图片仍“看不见”，常见原因是：
- 父容器有
overflow: hidden且图片尺寸超出（比如宽高设为100%但原始图比例不对） - CSS 动画或 transition 正在执行，导致渲染管线延迟应用样式变更
- 使用了
will-change: transform等提升图层的属性，意外隔离了渲染上下文
调试建议：打开 DevTools → Elements 面板，手动删掉 style="display: none;"，看图是否立刻出现；如果能，说明 JS 执行没问题，问题出在样式或渲染层。
onload 在某些情况下（尤其是本地开发 HTTP Server 未启用缓存头）可能因服务端响应慢或跨域限制被静默吞掉，导致始终不显示**。上线前务必用真实网络环境测试，并加上 onerror 处理和日志输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
