如何使用javascript循環測試圖像加載所需的時間

Question

我正在嘗試進行一些測試，以查看不同的圖像需要多長時間才能返回到我的瀏覽器。 我正在使用JavaScript進行循環。 但是，循環似乎在加載第一個圖像之前運行，並且返回沒有給出准確的答案。 下面是我的代碼：

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; 
}

結果，我得到：

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 

我嘗試了不同的方法來嘗試使循環僅在加載每個映像之后才運行，但沒有成功。 有任何想法嗎？ 謝謝！

Answer 1

您需要將radius和startTime放在閉合startTime中，否則您將始終引用相同的變量：

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";
}