Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Время загрузки картинки (https://javascript.ru/forum/misc/8376-vremya-zagruzki-kartinki.html)

Snipe 22.03.2010 16:27

Время загрузки картинки
 
День добрый.
Вопрос интересует следующий: можно ли узнать время загрзуки отдельно картинки на странице сайта.

Эта картинка размещается в нужном месте сайта и надо узнать именно её время загрузки.

По идее можно было бы сделать так: засечь время JS-ом перед картинкой и время по onload картинки, но такой метод не верен.
Т.к. JS может сработать, начав отсчет времени, но картинка в этот момент грузится не начнет, потому что перед ней другие десять еще не загрузились.

М.б. есть какой-то другой способ, просто я так навскидку не припомню.

В конце концов firebug же как-то определяет все времена по отдельности. Другой вопрос, что в аддонах возможностей побольше.

Kolyaj 22.03.2010 16:37

Вставьте JavaScript'ом картинку и поймайте у неё onload.

Snipe 22.03.2010 16:40

Цитата:

Сообщение от Kolyaj (Сообщение 48609)
Вставьте JavaScript'ом картинку и поймайте у неё onload.

Имеет ввиду после загрузки ДОМа?

Kolyaj 22.03.2010 16:48

Лучше после загрузки всей страницы, результат будет чище, но все равно будет зависеть от остального окружения (торенты качаются, например).

Gvozd 22.03.2010 17:12

а какая конечная цель?
если тестирование узких мест сайта, то чем фаербаг не подходит?
в ином случае не представляю для чего это может понадобится

Snipe 22.03.2010 17:44

Торренты не в счет.

Ок, допустим вариант загрузки картинки после загрузки дома.
А нельзя узнать время загрузки картинки до создания дома?

Просто есть счетчик, суть в том, что картинка размещается посреди документа и показывает очень примерное время загрузки контента до этой картинки. Однако с завидной регулярностью это время уходит за 100 секунд, при чем только в ФФ. Поэтому хотелось бы выцыпить время между началом загрузки картинки и завершением загрузки, не выбрасывая картинку за пределы загрузки ДОМа.

Попробовал посоздавать картинку через document.write и через JS во время загрузки страницы - вроде особой разницы не заметил по сравнению с вставкой картинки через html. Или должна быть?

Gvozd 22.03.2010 17:54

посмотри фаербагом время загрузки
или снифером каким

Snipe 22.03.2010 17:57

В том то и беда, что у меня все работает на отлично и в фаербаге и картинка нормально статистику отдает.
А вот у пользователей выскакивает такая ерунда, типа 100 секунд на загрузку. Поэтому смотреть у меня смысла нет. =\

А у пользователей как проверить?
Вот и выдумываем всякие хитрости. =\

Snipe 23.03.2010 12:10

ну т.е. в приведенных мною условиях никак вывернуться нельзя?

Nekromancer 23.03.2010 13:33

<script type="text/javascript">
function now(){
	return (new Date).getTime();
}
var Time = now();
</script>
<img src="http://javascript.ru/files/onready/img5.php" onload="alert(now()-Time)">

Snipe 24.03.2010 12:18

Цитата:

Сообщение от Nekromancer (Сообщение 48729)
<script type="text/javascript">
function now(){
	return (new Date).getTime();
}
var Time = now();
</script>
<img src="http://javascript.ru/files/onready/img5.php" onload="alert(now()-Time)">

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

Nekromancer 24.03.2010 13:08

Так ставь скрипт непосредственно перед этой картинкой. Или ты имеешь введу что у браузера ограниченное количество одновременно загружаемых картинок?

Snipe 24.03.2010 13:36

Цитата:

Сообщение от Nekromancer (Сообщение 48877)
Так ставь скрипт непосредственно перед этой картинкой. Или ты имеешь введу что у браузера ограниченное количество одновременно загружаемых картинок?

Ага, браузер одновременно грузит несколько картинок параллельно загрузке ДОМа. И то что мы засекли время с помощью JS перед картинкой не значит, что картинка начала грузиться.

vk65535 24.03.2010 13:53

Остается только ждать onload-а страницы, потом создавать картинку.
Если б это было в осле, можно было бы помудрить с onreadystatechange.

Nekromancer 24.03.2010 15:01

<script type="text/javascript">
function now(){
	return (new Date).getTime();
}
var timer = 0,
loadimg = function(img){
timer = now();
img.src = 'http://javascript.ru/files/onready/img5.php';
},
loadedimg = function(img){
var loadtime = now()-timer;
alert(loadtime);
};
</script>
<img src="javascript:true;" onerror="loadimg(this)" onload="loadedimg(this)" alt="Загрзука.." title="Загрзука..">

Nekromancer 24.03.2010 16:15

<script type="text/javascript">
function now(){
    return (new Date).getTime();
}
var firstErr = true, firstLoad = true, time;
function isError(img){
	if(firstErr){
		time = now();
		img.src = 'http://javascript.ru/files/onready/img5.php';
		firstErr = false;
	} 
}
function isLoad(img){
	if(firstLoad&&window.opera) firstLoad = false;
	else alert(now()-time)
}
</script>
<img src="javascript:;" onerror="isError(this)" onload="isLoad(this)"  alt="Загрзука.." title="Загрзука..">


Вот так вот, с фиксом оперы. Грубо, но как есть )

Snipe 24.03.2010 18:46

Ага, спасибо, похоже на правду. Будем пробовать.

Nekromancer 24.03.2010 20:07

Ещё раз пардон, так короче и кроссбраузернее)) Раньше чего то не подумал..
<script type="text/javascript">
function now(){
    return (new Date).getTime();
}
var time;
function isError(img){
	time = now();
	img.src = 'http://javascript.ru/files/onready/img5.php';
}
function isLoad(img){
	alert(now()-time)
}
</script>
<img src="about:blank" onerror="isError(this);" onload="isLoad(this)"  alt="Загрзука.." title="Загрзука..">

Snipe 25.03.2010 11:07

Забавно, но кардинальные различия (между временем обычной загрузки и временем от еррор до загрузки) заметны только в FF.
В остальных браузерах почти нет разницы.

Nekromancer 25.03.2010 11:19

На сколько кардинальные?)

Nekromancer 25.03.2010 11:23

В Firefox по моему дольше грузится если стоит "about:blank" а если "javascript:;" то быстрее..
вообще about:blank это для ИЕ и опера, для остальных можно javascript:; прописывать..

П.С. Если не смотреть фаербагом в момент загрузки, должно быть быстрее )

Snipe 25.03.2010 14:29

Цитата:

Сообщение от Nekromancer (Сообщение 48997)
На сколько кардинальные?)

Ну если в FF разница раза в три 210ms и 70ms, то в других браузерах разница 10-30 ms, например 170ms на обычную загрузку картинки и 155ms на загрузку картинку по error.
Это на моей тестовой страничке.
Причем такое ощущение, что опера и сафари плюют на очередность и сначала загружают мелкие картинки, а потом тяжелые.

Nekromancer 25.03.2010 14:39

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

П.С. Даёж событие onconnect :write:

Snipe 26.03.2010 11:35

Ну или onStartLoading )))

Snipe 05.04.2010 15:21

Веселье продолжается.
<script type="text/javascript">
//Чем раньше ставим этот код, тем лучше
var LoadCounter={};

(function(){
var ERR_TIME = 'pict_load_time';
var LOAD_TIME = 'time';
var id = 'mysite.ru';
var startTime = new Date();
var resultStr = '';
var errorTime;

function now(){
   return (new Date).getTime();
}

function sendData() {
   if (location.host.search(id) == -1)
       return false;
   var img = document.createElement('img');
   var host = location.host.replace(/^www\./, '');
   img.src = 'http://mysite.ru/log_time_download.php?id='+id+'&url='+escape(host)+escape(location.pathname)+resultStr;
   img.style.position = 'absolute';
   img.style.left = '-5px';
   img.style.top = '-5px';
   img.style.width = '1px';
   img.style.height = '1px';
   document.body.insertBefore(img, document.body.firstChild);
}

LoadCounter.isError = function(el) {
   errorTime = now();
   if (el)
       el.src = 'http://mysite.ru/1px.gif?r='+Math.random();
}

LoadCounter.isLoad = function() {
   var secondTime = now() - errorTime;
   if (resultStr) {
       resultStr += '&'+ERR_TIME+'='+secondTime;
       sendData();
   } else {
       resultStr += '&'+ERR_TIME+'='+secondTime;
   }
}

LoadCounter.simpleLoad = function() {
   var simpleTime = now() - startTime;
   if (resultStr) {
       resultStr += '&'+LOAD_TIME+'='+simpleTime;
       sendData();
   } else {
       resultStr += '&'+LOAD_TIME+'='+simpleTime;
   }
}
})()
</script>

где-нибудь в серединке:
<script type="text/javascript">
document.write('<img src="http://mysite.ru/1px.gif?r='+Math.random()+'" onload="LoadCounter.simpleLoad();" />');
</script>
<img src="about:blank" onerror="LoadCounter.isError(this)"  onload="LoadCounter.isLoad(this)" />


pict_load_time - время между onerror и onload первой картинки
time - время от скрипта, до загрузки картинки (картинка вставляется с помощью document.write)

Т.е. по идее onload происходит один раз и никаких двойных и более времен быть не может.
Однако имеем, что имеем (опять же в FF):
&time=742&pict_load_time=200&time=2502&pict_load_t ime=1762&time=2597&pict_load_time=1857&time=2650&p ict_load_time=1910&time=2715...

Первым делом подумал про аякс, но он не используется на странице, да и не дружит аякс с document.write.
Опять же ошибка повторяется не у меня, поэтому потыркаться возможности нету, так что играем в гадалку...

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

Nekromancer 05.04.2010 15:46

я так понимаю у тебя не одна картинка загружается так.. а в коде я нигде не увидел, чтоб очищалась "resultStr".. загрузка проходит то один раз.. но параметры добавляются несколько раз.. как можешь заметить у них время разное)

Snipe 05.04.2010 15:56

В том то и дело, что картинка создается один раз.
По крайней мере в коде это все указано в единственном экземпляре.

Ну и если бы она создавалась не один раз - это было бы повальное явление во всех браузерах... А так происходит только в ФФ, да и то не всегда...

Nekromancer 05.04.2010 16:04

вот я и клоню к тому, что нужно добавить "resultStr = '';" в конец "isLoad", или лучше в sendData :)

Snipe 05.04.2010 16:19

Ничего не понял.
как это поможет? статистика то продолжит отправляться на все вымышленные onload'ы...
В итоге будет не одна строка длинная, а много мелких, которые по сути тоже не верны. =\

Интересна причина, а не последствия. Последствия можно легко устранить так же как в твоем варианте с Оперой.

Nekromancer 05.04.2010 16:31

Непонятно конечно.. эт надо плотно покопаться %)

Aetae 05.04.2010 16:36

Ну надо полагать "about:blank" воспринимаетс как картинка имеющая пустое содержание, но существующая и, соответственно, onload успевает сработать до смены. Хотя мож я просто не до конца въехал в тему.)

Snipe 05.04.2010 18:14

Играем в Хауса =)

document.write('<img src="http://mysite.ru/1px.gif?r='+Math.random()+'" onload="LoadCounter.simpleLoad();" />');

тут src не about:blank, однако с этой картинки тоже имеем кучу разных времен.


-------
Так же основываясь на временах, пришедших на сервер, можно сделать вывод, что onerror сработал один раз, а onload'ы у обеих картинок - несколько...

Aetae 05.04.2010 18:44

Хауса говорите?)
Ну допустим, почему-то параметр добавленный к картинке ('?xxx') интерпретируется как ошибка, что вызывает онеррор, что вследствие вызывает перезагрузку, которая в свою очередь вызывает повторный онлоад... и так по кругу.)
Вообще гадание на кофейной гуще получается без возможности воплотить сей глюк.)

Snipe 05.04.2010 19:19

Да вроде никогда проблем не было с добавлением рандомного числа, а больше там вроде к пути картинки ничего и не добавляется =\

Aetae 05.04.2010 20:14

Ну дык у меня и сейчас нет, не эмулируется что-то у меня данная проблема))
Зато если запустить с левыми картинками(как сейчас стоят в примере кода), оно реально зацикливается и подвисает.)

Nekromancer 05.04.2010 20:20

самое интересное что в прошлых скриптах такого не ту.. алерты вылетают по одному разу..а в таком случае их должно быть как минимум несколько.. наверно собака всё таки зарыта где то в конкатенации строк)

П.С. Пошёл качать последний сезон Хауса, спасибо что напомнили)


Часовой пояс GMT +3, время: 15:02.