Question

Here is the image-loading construction in js:

var img = new Image();
img.onload = function(){
    //do something
}
img.src = "path to image";

I’m curious way this works, that after assigning string to object some event is triggered. Could someone explain it to me?

Answer 1

Image is a special object (known in the spec as a host object) whose implementation is provided by the browser. The constructor is actually returning a new HTMLImageElement.

Internally, the src property has a setter function. When you set the src, the browser begins fetching the image in the background. (The exact mechanism by which this happens varies from browser to browser.)

When the request for the image completes successfully, the browser fires the load event. (If unsuccessful, it will fire the error event.)