How to track the loading progress of an image in JavaScript

Is it possible to monitor the loading progress of an image in JavaScript while it’s being downloaded? I’d like to use the HTML5 <progress> element to visually display the loading status of an image.

Ideally, I’m looking for something like this:

var img = new Image();

img.onloadprogress = function(e) {

progressBar.value = e.loaded / e.total;

};

img.src = "image.jpg";

Is there any way to achieve this or a similar effect?

Like [0]Answer this question

Showing comments related to this question.

_coldshadow45

2025-11-05

You can track the loading progress of an image in JavaScript by creating a new Image object and using an HTTP request to fetch the image data. During the download, you can listen to progress events provided by the request. These events provide information about how much of the image has been loaded compared to the total size. By calculating the percentage loaded from this information, you can update a progress bar or display the loading status. Once the download is complete, you can set the image’s source to the downloaded data so that it displays on the page. Essentially, the steps are: Create an Image object. Fetch the image data using an HTTP request. Track the download progress with progress events. Update a variable or element with the current percentage loaded. Once fully loaded, display the image. This approach lets you show real-time loading progress without waiting for the image to fully load.