how to calculate image loading/rendering time in javascript?

Question

Is there any way to find image loading/rendering time in a webpage using javascript/jquery?

Answer 1

The right answer here is to use the development tools built into a browser like Chrome or Firefox/Firebug that will tell you how long all resources in the page are taking to load. Those tools have access to more information that pure javascript has access to.

With javascript, you can precisely time the loading of an image that is specified with javascript. You cannot use javascript to precisely time the loading of an image that is specified in your HTML because there is no precise way to start a javascript time measurement at exactly the instant that the image starts loading.

To time an image specified in javascript:

var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image took " + loadtime + "ms to load");
};
img.src = "http://www.whatever.com/testimg.jpg";

The best you could do for an image specified in HTML would be this:

The