How does image loading works in JavaScript?

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?

FYI, new Image() is equivalent to document.createElement('img'). — duri
– duri, Commented Oct 20, 2012 at 22:24
This is very useful for making it cache images to be loaded later, like those used by hidden elements (hidden by either rule - visibility:hidden or display:none). — inhan
– inhan, Commented Oct 20, 2012 at 22:35

josh3736 · Accepted Answer · 2012-10-20 22:29:00Z

3

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

edited Oct 20, 2012 at 22:29

answered Oct 20, 2012 at 22:22

josh3736

146k34 gold badges227 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2012-10-20 22:22:03Z

0

When you assign a string to the src property of the Image object the browser sends a request for the image from the server specified in the URL that should be in that string.

When the response comes back from the server with a valid image, the load event is triggered, and the onload event handler is called.

answered Oct 20, 2012 at 22:22

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

How does image loading works in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related