图片load事件能否同步触发？缓存及Base64场景技术问询

示例代码 #

let img = document.createElement("img");
img.addEventListener("load", function() {
    alert("Loaded!");
});
img.src = external_string; // load事件会在这里触发吗？

核心问题 #

当external_string指向的图片处于浏览器缓存中，或是Base64编码格式时，load事件会不会在赋值img.src的同一行同步触发？

实际需求是希望该事件始终异步触发，以便在事件触发前完成更多初始化操作。如果存在同步触发的可能，就需要额外处理延迟触发逻辑。本人实际测试发现事件均为异步触发，但未在官方文档中找到明确的细节说明。

解答 #

结论 #

无论图片是缓存命中、Base64格式还是其他可立即获取的本地资源，load事件永远是异步触发的，绝对不会在赋值img.src的同一行同步执行回调函数。

深层原因 #

这是由浏览器的事件循环机制决定的：所有资源加载相关的事件回调都会被放入异步任务队列中，只有当当前同步代码块全部执行完毕后，浏览器才会去处理任务队列中的回调。哪怕图片已经在缓存里，浏览器也不会打破异步流程直接同步执行load回调——这是浏览器事件模型的统一规范，目的是保证代码执行顺序的一致性，避免同步回调打乱后续的初始化逻辑。

补充建议 #

如果仍担心极端场景（实际上完全没必要），可以通过确保事件监听先于src赋值（你的原代码已经遵循了这个正确顺序），或者用setTimeout将后续初始化操作放到下一个事件循环：

let img = document.createElement("img");
img.addEventListener("load", function() {
    alert("Loaded!");
});
img.src = external_string;

// 该代码会先于load回调执行，证明异步特性
console.log("初始化操作已完成");

内容的提问来源于stack exchange，提问作者Vilx-