javascript - 图像加载在 JavaScript 中是如何工作的？

Question

这是js中的图像加载结构：

var img = new Image();
img.onload = function(){
    //do something
}
img.src = "path to image";

我很好奇这是如何工作的，在将字符串分配给对象之后会触发一些事件。有人可以向我解释吗？

Answer 1

Image是一个特殊对象（在规范中称为主机对象），其实现由浏览器提供。构造函数实际上是返回一个 new HTMLImageElement。

在内部，该src属性有一个 setter 函数。当您设置 时src，浏览器开始在后台获取图像。（发生这种情况的确切机制因浏览器而异。）

当图像请求成功完成时，浏览器会触发该load事件。（如果不成功，它将触发error事件。）

Answer 2

当您将字符串分配给对象的src属性时，Image浏览器会从应该在该字符串中的 URL 中指定的服务器发送对图像的请求。

当从服务器返回带有有效图像的响应时，将load触发事件，并onload调用事件处理程序。