Лучшая практика для использования window.onload

Question

Я разрабатываю сайты / компоненты / модули и плагины Joomla, и каждый раз мне требуется возможность использовать JavaScript, который вызывает событие при загрузке страницы. В большинстве случаев это делается с помощью функции window.onload.

Мой вопрос:

1. Это лучший способ инициировать события JavaScript при загрузке страницы или есть лучший / более новый способ?
2. Если это единственный способ инициировать событие при загрузке страницы, каков наилучший способ убедиться, что несколько событий могут выполняться разными сценариями?

Answer 1

window.onload = function(){}; работает, но, как вы могли заметить, позволяет указывать только 1 слушателя .

Я бы сказал, что лучший / более новый способ сделать это - использовать фреймворк или просто использовать простую реализацию нативных методов addEventListener и attachEvent (для IE), которая позволяет вам удалить также слушателей событий.

Вот кросс-браузерная реализация:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

Для случая окна. Нагрузка: listen("load", window, function() { });

<Ч />

РЕДАКТИРОВАТЬ Я хотел бы расширить свой ответ, добавив ценную информацию, на которую указывали другие.

Это примерно DOMContentLoaded (в настоящее время это поддерживается в Mozilla, Opera и webkit), а также onreadystatechange (для IE) события , которые может применяться к объекту document , чтобы понять, когда документ доступен для манипуляции (без ожидания загрузки всех изображений / таблиц стилей и т. д.).

Существует множество "хакерских" реализаций для поддержки этого в разных браузерах, поэтому я настоятельно рекомендую использовать фреймворк для этой функции.

Answer 2

События window.onload переопределяются для нескольких созданий. Для добавления функций используйте window.addEventListener (стандарт W3C) или window.attachEvent (для IE). Используйте следующий код, который работал.

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

Answer 3

Современные фреймворки javascript внедрили идею события «готов к документам». Это событие сработает, когда документ будет готов к выполнению манипуляций с DOM. Событие onload срабатывает только после загрузки ВСЕХ на странице.

Наряду с событием «готовность к документу» платформы предоставили способ поставить в очередь несколько битов кода Javascript и функций, которые должны запускаться при возникновении события.

Так что, если вы против фреймворков, лучший способ сделать это - реализовать собственную очередь document.onload.

Если вы не против фреймворков, то вам нужно изучить jQuery и document.ready , Prototype и dom: загружен , Dojo и addOnLoad или Google для [вашего фреймворка] и «документ готов»,

Если вы не выбрали фреймворк, но заинтересованы, jQuery - это хорошее место для начала. Он не меняет никакой основной функциональности Javascript и, как правило, будет оставаться в стороне от вас и позволит вам делать то, что вам нравится, когда вы захотите.

Answer 4

Joomla поставляется с MooTools, поэтому вам будет проще всего использовать библиотеку MooTools для дополнительного кода. MooTools поставляется с пользовательским событием domready, которое срабатывает при загрузке страницы и анализе дерева документов.

window.addEvent( domready, function() { code to execute on load here } );

Более подробную информацию о MooTools можно найти здесь . Joomla 1.5 в настоящее время поставляется с MT1.1, а альфа-версия Joomla 1.6 будет включать MT1.2

Answer 5

Это грязный, но более короткий путь: P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )

Answer 6

Лично я предпочитаю этот метод . Он не только позволяет вам иметь несколько onload функций, но если какой-то сценарий определил его до , к которому вы пришли, этот метод достаточно хорош, чтобы справиться с этим ... Осталась только одна проблема, если страница загружает несколько скриптов, которые не используют функцию window.addLoad(); но это их проблема:).

P.S. Также замечательно, если вы хотите «связать» больше функций позже.

Answer 7

Поскольку я всегда включаю JS-файлы jQuery / bootstrap внизу документа и не имею доступа к $ поверх документа, я разработал крошечный плагин "init", который является единственным и единственным JS-скриптом, который я включаю в самый верх мои страницы:

window.init = new function() {
    var list = [];

    this.push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.push(window.onload);
        }
        window.onload = this.run;
    }
};

Используя это, я могу определить любой анонимный загрузчик на странице, до включения jQuery и начальной загрузки, и быть уверенным, что он сработает после появления jQuery:

init.push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});