How do I test the time images take to load using a javascript loop

Question

I am trying to perform some tests to see how long different images take to return to my browser. I am using a javascript for loop. However, The loop seems to run before the first image is loaded and the return does not give an accurate answer. Below is my code:

for (var radius=1; radius<10; radius++)
{
var startTime = new Date().getTime();
var img = new Image();

img.onload = function() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image with radius: "+radius+" took " + loadtime + "ms to load");
};


url="http://test"+radius+"test2.com";
img.src = url; 
}

As a result, I get:

image with radius: 10 took 175ms to load 
image with radius: 10 took 368ms to load 
image with radius: 10 took 463ms to load 
image with radius: 10 took 608ms to load 
image with radius: 10 took 751ms to load 
image with radius: 10 took 895ms to load 
image with radius: 10 took 1038ms to load 
image with radius: 10 took 1181ms to load 
image with radius: 10 took 1324ms to load

I tried different methods of trying to get the loop to run only after each image is loaded without any success. Any ideas? Thanks!

Do you know this is built into the browser already in the [network tab](https://developers.google.com/chrome-developer-tools/docs/network)? — epascarello, Apr 01 '13 at 14:21
Related: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example This will solve your `radius: 10` problem, but it won't cause the images to load one after the other. To do that, you'll need to use a queue that pops after each `load` event. Right now, you are telling the browser to fetch **all of the images at once**, but I suspect you want to wait for image *n* to load before you fetch *n+1*. — apsillers, Apr 01 '13 at 14:25
Times seem to be realistic, but your radius is logged from the radius variable after all iterations, i.e. 10. You will have to add a variable in your loop to keep the right radius value: `var uniqueRadius = radius;` and use this `uniqueRadius` in your `console.log` call. — atondelier, Apr 01 '13 at 14:26
Moreover, don't hesitate to write `+new Date` instead of `new Date().getTime()` — atondelier, Apr 01 '13 at 14:27
Ahh - ok I managed to get this going by just creating a normal function and calling that same function after complete. Much easier than a for loop. Thanks! — Kyle, Apr 01 '13 at 14:38

score 0 · Accepted Answer · edited Jun 25 '21 at 13:13

You need to put the radius and the startTime variables in a closure, otherwise you will always refer to the same variable:

function getLoadhandler(starttime, logmsg) {
    return function() {
         // get the local variables
         console.log(logmsg+": "+(starttime-Date.now()));
    };
}

for (var radius=1; radius<10; radius++) {
    var img = new Image();
    img.onload = getLoadhandler(Date.now(), "Load time of image with radius "+radius);
    img.src = "http://test"+radius+"test2.com";
}

How do I test the time images take to load using a javascript loop

1 Answers1