我想获得使用JavaScript更改img的src所用的时间。如下所示:
var startTime = new Date().getTime();
document.getElementById('img1').src = someNewUrl;
var elapsedTime = (new Date().getTime()) - startTime;
这段代码显然只是衡量浏览器设置img的src属性所花费的时间。
我想要的是实际测量图像实际加载所用时间的代码。
有没有办法可以实现这一目标?使用jQuery的解决方案将是令人愉快的。
感谢。
答案 0 :(得分: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});
答案 1 :(得分:1)
详细说明@ 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;
答案 2 :(得分:0)
$('#img1').load(function() {
... image has been loaded ...
}
你必须让加载程序调用另一个函数(或自己动手)来进行经过时间的计算/显示。