оброботка события load
Доброе время суток!
Подскажите как оброботать событие load не помешая в <body> или еще куда либо, только по средством JS? P.S. Только заумные скрипты и фразы не кидать. Я только начал учить JS. Заранее благадарен clgs. |
clgs, самый простой вариант:
window.onload = function() {
// code here
};
Однако, этот код уничтожит старый onload, если он был (например, прописанный в теге body), поэтому обычно запоминают старый onload, а в своей функции вызывают этот старый onload и затем уже свой код. P.S.: сегодня уже давно обрабатывают onDOMContentLoaded (событие наступает, когда построенно дерево DOM; порой, намного раньше, чем onload, т.к. onload наступит, когда вся страница (включая большие изображения) бедет загружена) и его эмуляции для браузеров, которые пока не поддерживают это событие. |
function addEvent(e,t,f){
if (e.addEventListener) e.addEventListener(t, f, false);
else if (e.attachEvent) e.attachEvent('on'+t, f)
}
function removeEvent(e,t,f){
if (e.removeEventListener) e.removeEventListener(t, f, false);
else if (e.detachEvent) e.detachEvent('on'+t, f)
}
addEvent(window, 'load', any_func);
removeEvent(window, 'load', any_func);
|
ZoNT, тогда уж оптимизировать до конца. Какой смысл каждый раз проверять, какую обработку юзать - "add..." или "attach..."? Лучше проверить это один раз при инициализации и создать свою функцию, в зависимости от браузера.
|
флаг в руки! Только это будет вешаться один раз и оптимизаия выйдет ненужная. При оптимизации по скорости ухудшится ситуация по размеру. Надо смотреть, что требуется. Если требуется один раз повесить обработчик и оди раз снять, то надо уменьшать объём. Если надо 20 раз в секунду рвешать/снимать обработчики ( :D ), тогда заводи быстродействующие браузерозависимые функции.
|
ZoNT, че-т я не верю, что универсальная функция добавления/удаления слушателя (где window - это такой же слушатель) у тебя используется в коде меньше, чем 10 раз :D Я всего лишь привел информацию; оптимизировать или нет - твое право =)
Цитата:
|
у меня она оптимизированна. По размеру. Так как по времени она вызывается НЕ ПОДРЯД (!!!) 10 раз, то и тормозов никогда не будет.
|
гм... Вообще, если честно, то нашёл где используется максимум по два раза добавление/удаление...
|
Цитата:
Цитата:
|
ну, 1мс*10 = 10мс. Мне не жалко 10мс на весь просмотр страницы, так как погрешности загрузки страницы больше 10мс.
Ха-ха-ха. Файл подгрузился и всё. А если стоит антикэш и файл отдаётся более чем миллиард раз в сутки??? 100байт*1000 000 000 = 93 гига трафика в сутки! |
Цитата:
|
Можно немного сократить условие :-)
function addEvent(e,t,f){
if (e.addEventListener) e.addEventListener(t, f, false);
//@cc_on e.attachEvent('on'+t, f);
}
function removeEvent(e,t,f){
if (e.removeEventListener) e.removeEventListener(t, f, false);
//@cc_on e.detachEvent('on'+t, f);
}
IE8b2 так и не поддерживает «addEventListener», и думаю не будет поддерживать, поэтому вроде должно корректно работать везде. |
Цитата:
|
Цитата:
Octane, да, можно и условный комментарий. На всякий случай, приведу вариант, о котором говорил выше (необфусцированный, естественно):
var registerEvent = (function() {
if (document.addEventListener) {
return function(element, eventName, handler, useCapture) {
return element.addEventListener(eventName, handler, useCapture);
};
} else if (document.attachEvent) {
return function(element, eventName, handler) {
return element.attachEvent('on' + eventName, handler);
};
}
})();
var unRegisterEvent = (function() {
if (document.removeEventListener) {
return function(element, eventName, handler, useCapture) {
return element.removeEventListener(eventName, handler, useCapture);
};
} else if (document.detachEvent) {
return function(element, eventName, handler) {
return element.detachEvent('on' + eventName, handler);
};
}
})();
|
ну и сравни по размеру:
function addEvent(e,t,f){if(e.addEventListener)e.addEventListener(t,f,false);else e.attachEvent('on'+t,f)}
function removeEvent(e,t,f){if(e.removeEventListener)e.removeEventListener(t,f,false);else e.detachEvent('on'+t,f)}
и
var addEvent=(function(){if(document.addEventListener)return function(e,n,h,u){e.addEventListener(n,h,u)};else return function(e,n,h){e.attachEvent('on'+n,h)}})();
var removeEvent=(function(){if(document.removeEventListener)return function(e,n,h,u){e.removeEventListener(n,h,u)};else return function(e,n,h){e.detachEvent('on'+n, h)}})();
338(твой) 223(мой) Итого: 115 байт (более 100 байт). (115 * 1 000 000 000)/1073741824 = 107 гигов/сутки. |
ZoNT, мелочи это все =) Ну как знаешь, повторю - я привел вариант оптимизации, принять или нет - это уже твое дело.
А по скорости тесты провел? |
Я тебе про оптимизацию по размеру, он мне про баню...
Выигрывая 10мс на стороне клиента мы попадаем на 107 гигов ежедневного трафика. Ты линукс уважаешь? А ты знаешь что сейчас ядро линукса собирается с оптимизацией по размеру, а не по скорости? |
Цитата:
По твоим рассказам, твой код должен тогда выглядеть примерно так (если на счету уже байты): var d = document, b = 'EventListener', c = 'add', e = 'remove', f = 'attach', g = 'detach'; if(d[c+b])q[c+b](...); // и т.д. // что ж ты так не пишешь, а? Если у вас так все сложно с трафом =) Еще пример - глубокое DOM-дерево. Берем коллекцию (в самой глубине) из n-ого кол-ва элементов, проходимся циклом (ты, как я понимаю, будешь использовать второй вариант, да? (ну конечно, целых 9 байт текста тратится на объявление переменной length ;))):
// быстрый
for (var k = 0, length = коллекция.length; k < length; k++) { // code }
// медленный (каждый раз вычисляется значение
// свойства length, перед этим из DOM-дерева получается
// сама колекция - это тоже время)
for (var k = 0; k < коллекция.length; k++) { // code }
Цитата:
Цитата:
|
for (var k = 0, l=коллекция.length; k < l; k ++) - итого 3 лишних байта.
Но эта не тот случай, на котором надо экономить. Ты сильно утрируешь: коллекция будет перебираться намного дольше, чем выполняется навешивание обработчика событий. Плюс я никогда не навешиваю обработку событий в цикле. Если есть куча элементов, которым надо навесить обработчик в цикле, значит можно этот обработчик навесить 1 раз на парент и немного откорректировать код. |
У больших проектов (1 000 000 000 хостов) есть проблемы и побольше, чем 107 гигов траффика в сутки. Да и вообще обсуждается сферический сервер в вакууме, ведь при стольких хостах исходящий траффик настолько велик, что лучше задумываться об оптимизации скорости на клиенте, чем о лишних байтах.
|
Цитата:
Цитата:
for (var k = 0, l=коллекция[a]; k < l; k ++) - итого, даже при двух подобных циклах в коде, ты сэкономишь 5 байт =) Только тогда весь код так пиши (как я предлагал в предыдущем посте var d = document; var a = 'add'; ) Ладно, все, спор бессмысленный, завершимся на этом. |
если поищешь здесь на форуме скрипт маскированного воода, то убедишся, что я так и пишу :D
|
Dmitry A. Soshnikov,
объясни пожалуйста, почему определение функции registerEvent через скобки (function(){ ... })() будет "кэшировать" if-else и где про это можно почитать подробнее? |
EugenyK, все просто:
var f = function () {
if (известныеДанные) {
alert(1);
} else {
alert(2);
}
};
При вызове данной функции f() всегда будет выполняться if (это очевидно). Далее, известно, что функцию можно вызвать сразу после объявления:
(function a () { // объявляем функцию
alert(3);
})(); // и тут же ее вызваем
Кстати, имя функции в данном случае опционально. В JavaScript функция является объектом, ее можно вернуть, присвоить и т.д. - см. первый пример - переменной f присваивается анонимная функция, которая потом доступна для вызова через имя переменной - f(). Т.е. первый пример можно "перефразировать" так (мы делаем внешнюю оболочку из анонимной функции, которая вызывается сразу же после своего определения и возвращает другую анонимную функцию):
var f = (function () {
return function () {
if (известныеДанные) {
alert(1);
} else {
alert(2);
}
}
})();
Таким образов вызов нынешней функции f() ничем не отличается от первой. Но, естественно, никакого смысла в такой перефразировке нет - мы только лишь создали дополнительное действием по вызову внешней анонимной функции. Однако, (сейчас пойдет ответ на твой вопрос :)): если мы вынесем if-else в определение внешней оболочки (при условии, что данные для проверки известны заранее и неизменны), то проверка выполнится единожды - когда функция-оболочка вызовется сразу же после определения. В проверках же нужно вернуть функции уже без проверок, - просто выполняющих свои действия:
var f = (function () {
if (известныеДанные) {
return function () {
alert(1);
};
} else {
return function () {
alert(2);
};
}
})();
Теперь f - это либо function () {alert(1)}; либо function () {alert(2)};, и определилось это при инициализации - один раз. Сам вызов f() уже никаких проверок не делает. |
Большое спасибо! Теперь всё ясно.
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:01. |