1.0Чудо{вищные} заметкиhttps://miracle.rpz.nameMiRacLehttps://miracle.rpz.name/author/miracle/Счётчики и onload eventsНа страницах сайтов <strike>частенько</strike> почти всегда приходиться ставить счётчики различных бесплатных (и платных тоже) online-статистик, а так же нередко нужно поставить onload-handler на window (выпадающее меню, или нечто подобное требующее инициализации после полной загрузки страницы)... Ну приходиться и приходиться, проблема-то в чём? А проблема в том, что картинки(в данном случае изображения счётчиков) могут грузиться неимоверно долго(иногда, если сервер хотлога <em>(например хотлога - намеренно никого не обижаем ;o) ) </em>не доступен(занят) это занимает порядка 60-секунд(или сколько там таймаут в браузере ?!?), соответственно пока не произойдёт таймаут (не загрузиться изображение) <strong>window.onload</strong> не сработает.... Дошли руки наконец искоренить (хотя бы частично) эту "проблему"... - <strong>грузить счётчик после полной загрузки страницы</strong>
<blockquote>(да часть хитов возможно не попадут в статистику, но есть мнение, что пользователи [сужу по себе] и так не дожидаются полной загрузки "тормозных" страниц - либо уходят, потому что страница не интересна[раздражает тормознутостью],либо жмут Stop[продвинутые Esc] и продолжают работать )</blockquote>Так что теряем (если теряем) теоритически по минимому. Итак : Вместо счётчика делаем картинку (я сделал прозрачный однопиксельный gif) размером точно под счётчик (для того чтобы после загрузки счётчика не "расползалась вёрстка") (как правило 88x31) и даём ей id="counter_id" (для того чтобы позже найти её):
<blockquote><a href="http://free-online-statistics.example.com" ><img src="/images/1x1.gif" border="0" width="88" height="31" id="counter_id" /> </a></blockquote>в js-скрипт пишем функцию:
<pre class="js:nocontrols">
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;
}
}
}
</pre>
Далее рисуем что-то типа:
<pre class="js:nocontrols">addOnLoadEvent(doLoadCounter);</pre>
эта функция была "сочинена" по мотивам <a title="Назначение нескольких обработчиков для одного события" href="http://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?28#ObrabotkaSobyitiy">БазыЗнанийXpoint</a> её смысл - "навесить" обработчик load на window (или document - зависит от браузера) удобна как раз в том случае если их(обработчиков) надо иметь более одного (о чём я толкую уже 39-ю строчку)
<pre class="js">
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]);
}
}
}
</pre>Определение addHandler взято по ссылке выше...
<pre class="js">
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);
}
}
</pre>
<p>В итоге имеем: </p>
<p>1. Загружается страница, css, js, сопутствующие картинки с сайта <br />2. Выполняется js. <br />3. Срабатывает onload event <br />4. Страница "готова к употреблению" - всякие менюшки и прочие "прибамбасы" уже работают <br />5. Загружается счётчик <br /><br /><strong>P.S.</strong> <br />Наслышан о том что есть системы "запрещающие" редактировать код своих счётчиков…<br />хммм... не знаю как они проверяют "это дело" - по идее "запрос картинки" прозрачен для сервера (не важно как этот запрос сформирован), возможно выборочно-ручные "проверки на вшивость"... но думаю даже в таких "тяжёлых" случаях всегда можно найти выход - отказаться от этого счётчика или объяснить причину "переделок" владельцам системы…</p>rich