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

Ответ 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);

Для случая window.onload используйте: listen("load", window, function() { });

EDIT. Я хотел бы расширить свой ответ, добавив ценную информацию, на которую указывали другие.

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

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

Ответ 2

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

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

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

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

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

Ответ 3

События 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);
}

Ответ 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 alpha будет включать MT1.2

Ответ 5

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

P.S. Это также здорово, если вы хотите позже "увеличить" функции.

Ответ 6

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

function load(){
   *code*
}

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

Ответ 7

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

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 и bootstrap, и не забудьте, что он будет срабатывать, когда присутствует jQuery:

init.push(function() {

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

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