加载事件<img/> 涉及哪个阶段

从规范：

load：当 DOM 实现完成加载文档中的所有内容、框架集中的所有帧、 或 OBJECT 元素。

从HTML5规范中更具体：

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

1. 将img元素返回到不可用状态。
2. 如果获取算法的实例仍在为此元素运行，则中止该算法，丢弃任何挂起的内容 该算法生成的任务。
3. 忘记img元素的当前图像数据(如果有(。
4. 如果用户代理不支持图像，或者已禁用其对图像的支持，则中止这些步骤。
5. 如果元素的 src 属性的值为空字符串，则将元素设置为中断状态，将任务排队到 在 img 元素上触发一个名为 error 的简单事件， 并中止这些步骤。
6. 否则，解析元素的 src 属性相对于元素的值，如果成功， 获取该资源。 在此获得的资源 [SIC] 时尚是img元素的图像数据。 获取图像 必须延迟元素文档的加载事件，直到 资源后由网络任务源排队的任务 已获取(定义如下(已运行。 ... 任务 在资源出现后由网络任务源排队 在给定以下替代方法的情况下，提取必须适当地运行：

↪ 如果下载成功

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

↪ 否则

将 img 元素设置为中断状态，并将任务排队以在img元素上触发名为 error 的简单事件。

基于此，具体如下：

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

。只有在浏览器完全呈现图像后，才会触发 Load 事件。

读完这些行：

加载图像后，将调用处理程序。

可以停止为浏览器缓存中已存在的图像触发

我理解答案"img 已完全下载到计算机">

源

你问："荷载事件是关于什么阶段的？

然后发布了一个不完整的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 );
}