to what stage <img/> load event is regarding?

Question

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

does load raised when :

• img is fully downloaded to the computer ?

or

• img is fully rendered by browser?

Answer 1

You asked: "to what stage load event is regarding?"

And then posted an incomplete jQuery snippet:

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

An IMG element's onload event handler (whose code is handled by the browser itself) is not the same as jQuery's on instance method. So it is unclear what you want to know.

As evidenced by your question, the ensuing responses, and the source code itself (read it below), jQuery continues to serve as an example for how not to design an API -- and nearly 7 years after they've been told what's wrong with it.

So what's wrong with it? In a nutshell, jQuery methods are designed with a loose general-purpose contract. They expect anything (string, host object, etc), typecheck, then overload the method with varying behavior, depending on optional arguments, sometimes even optional middle arguments, and use extensive conditional logic to handle all the cases. The on method tops it off with an internal flag one ( if (one === 1) -- what if it's 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 );
}

Answer 2

From 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.

---

Even more specific 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.

Based on this, specifically:

1. Set the img element to the completely available state
2. Update the presentation of the image appropriately, and
3. Queue a task to fire a simple event named load at the img element

...the load event is fired only after the image is fully rendered by the browser.

Answer 3

After reading those lines:

As soon as the image has been loaded, the handler is called.

Can cease to fire for images that already live in the browser's cache

I understand answer "img is fully downloaded to the computer"

source