чудо{вищные} заметки

Sorry for my terrible english. My native language is PHP.

Счётчики и onload events

На страницах сайтов частенько почти всегда приходиться ставить счётчики различных бесплатных (и платных тоже) online-статистик, а так же нередко нужно поставить onload-handler на window (выпадающее меню, или нечто подобное требующее инициализации после полной загрузки страницы)… Ну приходиться и приходиться, проблема-то в чём? А проблема в том, что картинки(в данном случае изображения счётчиков) могут грузиться неимоверно долго(иногда, если сервер хотлога (например хотлога — намеренно никого не обижаем ;o) ) не доступен(занят) это занимает порядка 60-секунд(или сколько там таймаут в браузере ?!?), соответственно пока не произойдёт таймаут (не загрузиться изображение) window.onload не сработает…. Дошли руки наконец искоренить (хотя бы частично) эту «проблему»… — грузить счётчик после полной загрузки страницы

(да часть хитов возможно не попадут в статистику, но есть мнение, что пользователи [сужу по себе] и так не дожидаются полной загрузки «тормозных» страниц — либо уходят, потому что страница не интересна[раздражает тормознутостью],либо жмут Stop[продвинутые Esc] и продолжают работать )

Так что теряем (если теряем) теоритически по минимому. Итак : Вместо счётчика делаем картинку (я сделал прозрачный однопиксельный gif) размером точно под счётчик (для того чтобы после загрузки счётчика не «расползалась вёрстка») (как правило 88×31) и даём ей id=»counter_id» (для того чтобы позже найти её):

<a href=»http://free-online-statistics.example.com&#187; ><img src=»/images/1×1.gif» border=»0″ width=»88″ height=»31″ id=»counter_id» /> </a>

в js-скрипт пишем функцию:

function doLoadCounter() {
 var url=»http://free-online-statistics.example.com/counter.script&#187;;
    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.
Наслышан о том что есть системы «запрещающие» редактировать код своих счётчиков…
хммм… не знаю как они проверяют «это дело» — по идее «запрос картинки» прозрачен для сервера (не важно как этот запрос сформирован), возможно выборочно-ручные «проверки на вшивость»… но думаю даже в таких «тяжёлых» случаях всегда можно найти выход — отказаться от этого счётчика или объяснить причину «переделок» владельцам системы…

Реклама

Декабрь 6, 2005 - Posted by | dev, js, web

1 комментарий »

  1. […] Ещё немного о jquery:замечательный метод ready в IE в некоторых случаях не желает работать.Документация честно предупреждает о том, что если для body уже есть onload-handler, то метод может не сработать. Но обработчиков нет, а ready срабатывает 2 раза из 10 попыток. При этом иногда IE ещё не успевает обсчитать некоторые свойства объектов (замечено на offsetTop).А если отложить выполнение даже на 1 миллисекунду (через setTimeout), то всё выполняется так как задумано.На помощь приходит функция из БазыЗнанийXpoint-а о которой я писал раньше. Работает как часы (но без timeout-ов). […]

    Уведомление от jquery,IE и window.onload « чудо{вищные} заметки | Октябрь 11, 2006


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: