Получите прошедшее время для замены img src с помощью JavaScript

Я хотел бы получить прошедшее время, чтобы изменить src img с помощью JavaScript. Что-то вроде следующего:

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

Этот код, по-видимому, измеряет только время, необходимое браузеру для установки атрибута src файла img.

Вместо этого я хотел бы код, который фактически измеряет время, прошедшее до фактической загрузки изображения.

Есть ли способ, которым я могу это сделать? Решение с использованием jQuery было бы восхитительным.

Спасибо.


javascript image jquery src
person hmqcnoesy    schedule 22.08.2011    source источник
comment
Будьте осторожны с кэшированием. Возможно, вы не хотите, чтобы кэшированное изображение возвращалось.   -  person Amir Raminfar    schedule 23.08.2011

Ответы (3)


arrow_upward
0
arrow_downward 

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

Вам нужно, чтобы обработчик загрузки вызывал другую функцию (или делал это сам), чтобы выполнить расчет/отображение прошедшего времени.

person Marc B    schedule 22.08.2011
comment
Ваш ответ предполагает наличие JQuery. Хотя JQuery быстро становится стандартом де-факто, вставленный вами код не будет работать, пока JQuery не будет загружен. :) - person Dave Dopson; 23.08.2011
comment
И оператор говорит в последней строке, что решение с использованием jQuery было бы восхитительным. Учиться читать? - person Marc B; 23.08.2011
comment
@ddopson, автор сказал: «Решение с использованием jQuery было бы восхитительным», поэтому я думаю, что все в порядке. - person Amir Raminfar; 23.08.2011
comment
@Амир. ой. пропустил эту строчку. тем не менее, всегда полезно упомянуть об этом, чтобы какой-нибудь нуб не вставил код и не смог понять, почему «$» не является функцией. - person Dave Dopson; 24.08.2011

arrow_upward
1
arrow_downward

Для этого вам нужно использовать метод 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});
person Amir Raminfar    schedule 22.08.2011

arrow_upward
1
arrow_downward

Чтобы уточнить ответ @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;
person Matt Ball    schedule 22.08.2011
comment
@Matt +1 Это помогло собрать все воедино. Спасибо. - person hmqcnoesy; 23.08.2011