На страницах сайтов частенько почти всегда приходиться ставить счётчики различных бесплатных (и платных тоже) online-статистик, а так же нередко нужно поставить onload-handler на window (выпадающее меню, или нечто подобное требующее инициализации после полной загрузки страницы)… Ну приходиться и приходиться, проблема-то в чём? А проблема в том, что картинки(в данном случае изображения счётчиков) могут грузиться неимоверно долго(иногда, если сервер хотлога (например хотлога – намеренно никого не обижаем ;o) ) не доступен(занят) это занимает порядка 60-секунд(или сколько там таймаут в браузере ?!?), соответственно пока не произойдёт таймаут (не загрузиться изображение) window.onload не сработает…. Дошли руки наконец искоренить (хотя бы частично) эту “проблему”… – грузить счётчик после полной загрузки страницы
(да часть хитов возможно не попадут в статистику, но есть мнение, что пользователи [сужу по себе] и так не дожидаются полной загрузки “тормозных” страниц – либо уходят, потому что страница не интересна[раздражает тормознутостью],либо жмут Stop[продвинутые Esc] и продолжают работать )
Так что теряем (если теряем) теоритически по минимому. Итак : Вместо счётчика делаем картинку (я сделал прозрачный однопиксельный gif) размером точно под счётчик (для того чтобы после загрузки счётчика не “расползалась вёрстка”) (как правило 88×31) и даём ей id=”counter_id” (для того чтобы позже найти её):
в js-скрипт пишем функцию:
function doLoadCounter() { var url="http://free-online-statistics.example.com/counter.script"; var query_string = ""; // тут долго-долго собираем query_string (как правило нужно просто скопировать код счётчика и выбрать нужные параметры и убрать document.write(code) ) // var s=screen; // var px=(ie==1)?s.colorDepth:s.pixelDepth; // query_string += px; var counterImg = new Image(); counterImg.src = url + query_string; counterImg.onload = function() { var placeHolder = document.getElementById('counter_id'); if (placeHolder) { placeHolder.src = this.src; } } }
Далее рисуем что-то типа:
addOnLoadEvent(doLoadCounter);
эта функция была “сочинена” по мотивам БазыЗнанийXpoint её смысл – “навесить” обработчик load на window (или document – зависит от браузера) удобна как раз в том случае если их(обработчиков) надо иметь более одного (о чём я толкую уже 39-ю строчку)
function addOnLoadEvent() { var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null; if (root) { for (var i = 0; i < arguments.length; i++) { if ('function' == typeof(arguments[i])) addHandler(root,'load',arguments[i]); } } }
Определение addHandler взято по ссылке выше...
function addHandler(object, event, handler) { if (typeof (object.addEventListener) != 'undefined') object.addEventListener(event, handler, false); else if (typeof (object.attachEvent) != 'undefined') object.attachEvent('on' + event, handler); else { var handlersProp = '_handlerStack_' + event; var eventProp = 'on' + event; if (typeof (object[handlersProp]) == 'undefined') { object[handlersProp] = []; if (typeof (object[eventProp]) != 'undefined') object[handlersProp].push(object[eventProp]); object[eventProp] = function(e) { var ret = true; for (var i = 0; ret != false && i < object[handlersProp].length; i++) ret = object[handlersProp][i](e); return ret; } } object[handlersProp].push(handler); } }
В итоге имеем:
1. Загружается страница, css, js, сопутствующие картинки с сайта
2. Выполняется js.
3. Срабатывает onload event
4. Страница "готова к употреблению" - всякие менюшки и прочие "прибамбасы" уже работают
5. Загружается счётчик
P.S.
Наслышан о том что есть системы "запрещающие" редактировать код своих счётчиков…
хммм... не знаю как они проверяют "это дело" - по идее "запрос картинки" прозрачен для сервера (не важно как этот запрос сформирован), возможно выборочно-ручные "проверки на вшивость"... но думаю даже в таких "тяжёлых" случаях всегда можно найти выход - отказаться от этого счётчика или объяснить причину "переделок" владельцам системы…
Pingback:jquery,IE и window.onload « чудо{вищные} заметки