javascript - 与哪个阶段负载事件有关？

Question

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

确实在以下情况load下提出：

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

或者

• img 完全由浏览器呈现？

Answer 1

从规格：

load：当 DOM 实现完成加载文档中的所有内容、FRAMESET 中的所有框架或 OBJECT 元素时，会发生加载事件。

---

更具体的来自 HTML5 规范：

当用户代理要更新元素的图像数据时img ，它必须运行以下步骤：

1. img将元素返回到不可用状态。
2. 如果获取算法的实例仍在为此元素运行，则中止该算法，丢弃该 算法生成的任何未决任务。
3. 忘记img元素的当前图像数据（如果有）。
4. 如果用户代理不支持图像，或者它对图像的支持已被禁用，则中止这些步骤。
5. 如果元素的src属性值为空字符串，则将元素设置为损坏状态，将任务排队以 触发error在元素上命名的简单事件img，然后中止这些步骤。
6. 否则，解析元素src属性的值，相对于元素，如果成功，则 获取该资源。以这种方式获得的资源 [SIC] 是img元素的图像数据。获取图像必须延迟元素文档的加载事件，直到一旦获取资源（定义如下），网络任务源排队的任务已经运行。...在获取资源后，网络任务源排队的任务必须根据以下备选方案采取适当的行动：

↪ 如果下载成功

将img元素设置为完全可用状态，适当地更新图像的呈现，并排队任务以触发load在img元素上 命名的简单事件。

↪ 否则

将img元素设置为损坏状态，并将任务排队以触发以元素命名的简单error事件img。

基于此，具体来说：

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

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

Answer 2

阅读这些行后：

一旦图像被加载，处理程序就会被调用。

可以停止对已经存在于浏览器缓存中的图像进行触发

我理解回答“img 已完全下载到计算机”

来源

Answer 3

您问：“加载事件与哪个阶段有关？”

然后发布了一个不完整的 jQuery 片段：

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

IMG 元素的onload事件处理程序（其代码由浏览器自己处理）与 jQuery 的on实例方法不同。所以不清楚你想知道什么。

正如您的问题、随后的回复和源代码本身（请阅读下文）所证明的那样，jQuery 继续作为如何不设计 API 的示例——在他们被告知有什么问题之后将近 7 年它。

那么它有什么问题呢？简而言之，jQuery 方法被设计为具有松散的通用合同。他们期望任何东西（字符串、宿主对象等）、类型检查，然后根据可选参数，有时甚至是可选的中间参数，以不同的行为重载方法，并使用广泛的条件逻辑来处理所有情况。该on方法以内部标志one（if (one === 1)-- 如果它是 2 怎么办？）结束它。

jQuery.fn.extend({

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
    var origFn, type;

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {
        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) { // && selector != null
            // ( types-Object, data )
            data = data || selector;
            selector = undefined;
        }
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

    if ( data == null && fn == null ) {
        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        if ( typeof selector === "string" ) {
            // ( types, selector, fn )
            fn = data;
            data = undefined;
        } else {
            // ( types, data, fn )
            fn = data;
            data = selector;
            selector = undefined;
        }
    }
    if ( fn === false ) {
        fn = returnFalse;
    } else if ( !fn ) {
        return this;
    }

    if ( one === 1 ) {
        origFn = fn;
        fn = function( event ) {
            // Can use an empty set, since event contains the info
            jQuery().off( event );
            return origFn.apply( this, arguments );
        };
        // Use same guid so caller can remove using origFn
        fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
    }
    return this.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    });
},
one: function( types, selector, data, fn ) {
    return this.on( types, selector, data, fn, 1 );
}