图片加载顺序由HTML解析顺序和loading属性共同决定，真正可控的是DOM插入时机与loading属性，其他如CSS背景、srcset或preload均无法改变相对加载顺序。
图片加载顺序由 HTML 解析顺序和 loading 属性共同决定
浏览器默认按 HTML 中 loading 属性。CSS background-image、srcset 或 JS 动态创建都属于间接控制，本质仍是改变请求发起时间点。
loading="eager" 和 loading="lazy" 的实际行为差异
这是唯一被所有现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）原生支持的加载控制方式，但它只影响“是否延迟加载”，不改变资源本身的网络优先级（如 fetch priority）。关键事实：
-
loading="eager"（默认值）：图片在 HTML 解析到该标签时立即发起请求，不受滚动位置影响 -
loading="lazy"：浏览器推迟请求，直到元素即将进入视口（通常提前几百像素），且仅对生效 - 即使设为
lazy，首屏关键图仍可能被浏览器自动提升优先级——这是 UA 的启发式策略，无法禁用 - 若图片在 DOM 中靠前但设了
lazy，它反而可能比后面设eager的图更晚开始加载
用 JS 动态插入 ![HTML5怎样控制图片加载顺序_HTML5控制加载顺序途径【优先】]()
当需要严格按业务逻辑排序（比如轮播图第一张必须最优先），应放弃静态 HTML 加载，改用 JS 控制插入顺序。注意不是用 fetch() 下载 blob，而是直接操作
这样做的前提是：你明确知道哪些图必须抢占带宽，且能接受 JS 执行延迟带来的渲染空白。不要在 DOMContentLoaded 之前插入大量
立即学习“前端免费学习笔记（深入）”；
避免踩坑：这些“控制顺序”的做法其实无效
很多方案看似合理，实则对加载顺序毫无影响：
- 给
style="max-width:90%"或opacity:0：样式隐藏不影响请求发起，该加载还是加载 - 把
src换成data-src再用 JS 赋值：这确实能延迟，但已脱离 HTML5 原生机制，属于自定义 lazyload，需自行处理兼容性和性能 - 调整
的as="image"：它只能提升单个资源的 fetch priority，不能改变多个图片间的相对顺序；且 preload 必须在中声明，无法动态调度 - 用
srcset切换分辨率：只是响应式选择，不改变请求时机或优先级
真正可控的只有两点：HTML 中的位置（静态）和 JS 插入时机（动态）。其他都是障眼法，或者依赖浏览器内部不可控的启发式优化。
