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

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.