How do you know that an image has loaded?

Question

In javascript you can override the 'Image.onload' method in order to do something when the image has loaded, such as create a "loading progression bar". But I don't get it. Isn't the image loaded when you do ' Image.src = "path" ' ?
At what point in time(or in the code) do you say that the image has loaded?
Maybe an alternative question would be: "how do you load an image?"

Answer 1

When you do 'image.src="path";' the browser make a request to the server for the file, and it should take some time to receive whole corresponding data (depending of image file size, network bandwith...) So, you can define an event listener for the 'onload' event, fired when image load is done.

For example, you load an image dynamically, and you will show it only when available:

// the action to perform when image is loaded
function imgLoaded() {
this.style.display = "block";
}

image.onload = imgLoaded;
img.src = "new_url";
/* do whatever you want, the event listener will be called asynchroniously as soon as possible after image is loaded */

Answer 2

@visph thank you much clearer now