获取使用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

您需要使用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 2

详细说明@ Marc的答案（使用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;

Answer 3

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

您必须让加载处理程序调用另一个函数（或自己执行）来执行经过时间计算/显示。