使用JavaScript獲取花費時間交換img src

Question

我想要花費時間用JavaScript改變img的src。像下面這樣：

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

此代碼顯然是隻測量所花費的時間瀏覽器設置IMG src屬性。

我想要的是代碼實際上會測量圖像實際加載之前所經過的時間。

有沒有辦法讓我做到這一點？使用jQuery的解決方案將是令人愉快的。

謝謝。

Answer 1

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

你必須讓負載處理程序調用另一個函數（或自己做）來完成經過時間的計算/顯示。

Answer 2

您需要使用onload方法來完成此操作。例如

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

使用jQuery

var startTime = new Date().getTime(); 
$('#img1').load(function(){ 
    var elapsedTime = (new Date().getTime()) - startTime 
).attr({src: someNewUrl}); 

Answer 3

爲了詳細說明@馬克的答案（使用jQuery和Date.now()爲簡潔起見）：

var start = Date.now(); 

$('#img1').one('load', function() 
{ 
    console.log('Image load took', Date.now() - start, 'ms'); 
}).attr('src', someNewUrl); 

---

沒有jQuery和諸如此類的東西：

var img = document.getElementById('img1'), 
    start; 

img.onload = function() 
{ 
    var duration = new Date().getTime() - start; 
    console.log('Image load took ' + duration + ' ms'); 
    img.onload = null; 
}; 

start = new Date().getTime(); 
img.src = someNewUrl;