javascript - <img/> 加载事件涉及到哪个阶段？

Question

$(".img").on("load",function () {...} );

load 是否在以下时间引发:

• img 是否已完全下载到计算机？

或

• img 完全由浏览器呈现？

Answer 1

来自 the spec :

load: The load event occurs when the DOM implementation finishes loading all content within a document, all frames within a FRAMESET, or an OBJECT element.

---

更具体 from the HTML5 spec :

When the user agent is to update the image data of an img element, it must run the following steps:

1. Return the img element to the unavailable state.
2. If an instance of the fetching algorithm is still running for this element, then abort that algorithm, discarding any pending tasks generated by that algorithm.
3. Forget the img element's current image data, if any.
4. If the user agent cannot support images, or its support for images has been disabled, then abort these steps.
5. If the element's src attribute's value is the empty string, then set the element to the broken state, queue a task to fire a simple event named error at the img element, and abort these steps.
6. Otherwise, resolve the value of the element's src attribute, relative to the element, and, if that is successful, fetch that resource. The resouce [SIC] obtained in this fashion is the img element's image data. Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run. ... The task that is queued by the networking task source once the resource has been fetched must act as appropriate given the following alternatives:

↪ If the download was successful

Set the img element to the completely available state, update the presentation of the image appropriately, and queue a task to fire a simple event named load at the img element.

↪ Otherwise

Set the img element to the broken state, and queue a task to fire a simple event named error at the img element.

基于此，具体来说:

1. 将img元素设置为完全可用状态
2. 适本地更新图像的呈现方式，并且
3. 排队任务以在 img 元素处触发名为 load 的简单事件

...加载事件仅在浏览器完全呈现图像后触发。