Search code examples
javascriptjqueryimagesrc

Get elapsed time to swap img src using JavaScript

I'd like to get the elapsed time to change the src of an img using JavaScript. Something like the following:

var startTime = new Date().getTime();
document.getElementById('img1').src = someNewUrl;
var elapsedTime = (new Date().getTime()) - startTime;

This code apparently is measuring only the time it takes the browser to set the src attribute of the img.

What I'd like instead is code that will actually measure the time elapsed until the image is actually loaded.

Is there a way I can accomplish that? A solution using jQuery would be delightful.

Thanks.

Solution 
  • $('#img1').load(function() {
   ... image has been loaded ...
}

    You'd have to have the load handler call another function (or do it itself) to do the elapsed time calculation/display.