Время загрузки картинки
День добрый.
Вопрос интересует следующий: можно ли узнать время загрзуки отдельно картинки на странице сайта. Эта картинка размещается в нужном месте сайта и надо узнать именно её время загрузки. По идее можно было бы сделать так: засечь время JS-ом перед картинкой и время по onload картинки, но такой метод не верен. Т.к. JS может сработать, начав отсчет времени, но картинка в этот момент грузится не начнет, потому что перед ней другие десять еще не загрузились. М.б. есть какой-то другой способ, просто я так навскидку не припомню. В конце концов firebug же как-то определяет все времена по отдельности. Другой вопрос, что в аддонах возможностей побольше. |
Вставьте JavaScript'ом картинку и поймайте у неё onload.
|
Цитата:
|
Лучше после загрузки всей страницы, результат будет чище, но все равно будет зависеть от остального окружения (торенты качаются, например).
|
а какая конечная цель?
если тестирование узких мест сайта, то чем фаербаг не подходит? в ином случае не представляю для чего это может понадобится |
Торренты не в счет.
Ок, допустим вариант загрузки картинки после загрузки дома. А нельзя узнать время загрузки картинки до создания дома? Просто есть счетчик, суть в том, что картинка размещается посреди документа и показывает очень примерное время загрузки контента до этой картинки. Однако с завидной регулярностью это время уходит за 100 секунд, при чем только в ФФ. Поэтому хотелось бы выцыпить время между началом загрузки картинки и завершением загрузки, не выбрасывая картинку за пределы загрузки ДОМа. Попробовал посоздавать картинку через document.write и через JS во время загрузки страницы - вроде особой разницы не заметил по сравнению с вставкой картинки через html. Или должна быть? |
посмотри фаербагом время загрузки
или снифером каким |
В том то и беда, что у меня все работает на отлично и в фаербаге и картинка нормально статистику отдает.
А вот у пользователей выскакивает такая ерунда, типа 100 секунд на загрузку. Поэтому смотреть у меня смысла нет. =\ А у пользователей как проверить? Вот и выдумываем всякие хитрости. =\ |
ну т.е. в приведенных мною условиях никак вывернуться нельзя?
|
<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)"> |
Цитата:
|
Так ставь скрипт непосредственно перед этой картинкой. Или ты имеешь введу что у браузера ограниченное количество одновременно загружаемых картинок?
|
Цитата:
|
Остается только ждать onload-а страницы, потом создавать картинку.
Если б это было в осле, можно было бы помудрить с onreadystatechange. |
<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="Загрзука.."> |
<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="Загрзука.."> Вот так вот, с фиксом оперы. Грубо, но как есть ) |
Ага, спасибо, похоже на правду. Будем пробовать.
|
Ещё раз пардон, так короче и кроссбраузернее)) Раньше чего то не подумал..
<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="Загрзука.."> |
Забавно, но кардинальные различия (между временем обычной загрузки и временем от еррор до загрузки) заметны только в FF.
В остальных браузерах почти нет разницы. |
На сколько кардинальные?)
|
В Firefox по моему дольше грузится если стоит "about:blank" а если "javascript:;" то быстрее..
вообще about:blank это для ИЕ и опера, для остальных можно javascript:; прописывать.. П.С. Если не смотреть фаербагом в момент загрузки, должно быть быстрее ) |
Цитата:
Это на моей тестовой страничке. Причем такое ощущение, что опера и сафари плюют на очередность и сначала загружают мелкие картинки, а потом тяжелые. |
Другого варианта по моему просто нет. Всякие там фаербаги и всё такое, ловят открытие соединения внутренними средствами браузера, которые к сожалению(или к счастью) просто так недоступны.
П.С. Даёж событие onconnect :write: |
Ну или onStartLoading )))
|
Веселье продолжается.
<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. Опять же ошибка повторяется не у меня, поэтому потыркаться возможности нету, так что играем в гадалку... Проблему можно решить в лоб, проверяя, первая ли это загрузка, но хочется понять, почему так происходит... |
я так понимаю у тебя не одна картинка загружается так.. а в коде я нигде не увидел, чтоб очищалась "resultStr".. загрузка проходит то один раз.. но параметры добавляются несколько раз.. как можешь заметить у них время разное)
|
В том то и дело, что картинка создается один раз.
По крайней мере в коде это все указано в единственном экземпляре. Ну и если бы она создавалась не один раз - это было бы повальное явление во всех браузерах... А так происходит только в ФФ, да и то не всегда... |
вот я и клоню к тому, что нужно добавить "resultStr = '';" в конец "isLoad", или лучше в sendData :)
|
Ничего не понял.
как это поможет? статистика то продолжит отправляться на все вымышленные onload'ы... В итоге будет не одна строка длинная, а много мелких, которые по сути тоже не верны. =\ Интересна причина, а не последствия. Последствия можно легко устранить так же как в твоем варианте с Оперой. |
Непонятно конечно.. эт надо плотно покопаться %)
|
Ну надо полагать "about:blank" воспринимаетс как картинка имеющая пустое содержание, но существующая и, соответственно, onload успевает сработать до смены. Хотя мож я просто не до конца въехал в тему.)
|
Играем в Хауса =)
document.write('<img src="http://mysite.ru/1px.gif?r='+Math.random()+'" onload="LoadCounter.simpleLoad();" />'); тут src не about:blank, однако с этой картинки тоже имеем кучу разных времен. ------- Так же основываясь на временах, пришедших на сервер, можно сделать вывод, что onerror сработал один раз, а onload'ы у обеих картинок - несколько... |
Хауса говорите?)
Ну допустим, почему-то параметр добавленный к картинке ('?xxx') интерпретируется как ошибка, что вызывает онеррор, что вследствие вызывает перезагрузку, которая в свою очередь вызывает повторный онлоад... и так по кругу.) Вообще гадание на кофейной гуще получается без возможности воплотить сей глюк.) |
Да вроде никогда проблем не было с добавлением рандомного числа, а больше там вроде к пути картинки ничего и не добавляется =\
|
Ну дык у меня и сейчас нет, не эмулируется что-то у меня данная проблема))
Зато если запустить с левыми картинками(как сейчас стоят в примере кода), оно реально зацикливается и подвисает.) |
самое интересное что в прошлых скриптах такого не ту.. алерты вылетают по одному разу..а в таком случае их должно быть как минимум несколько.. наверно собака всё таки зарыта где то в конкатенации строк)
П.С. Пошёл качать последний сезон Хауса, спасибо что напомнили) |
Часовой пояс GMT +3, время: 08:01. |