Попытка запустить событие onload в теге скрипта

102

Я пытаюсь загрузить набор скриптов по порядку, но событие onload у меня не запускается.

    var scripts = [
        '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
        MK.host+'/templates/templates.js'
    ];

    function loadScripts(scripts){
        var script = scripts.shift();
        var el = document.createElement('script');
        el.src = script;
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
    }

    loadScripts(scripts);

Я предполагаю, что собственные события, такие как el.onload, не срабатывают, когда jQuery используется для добавления элемента в DOM. Если я использую родной, document.body.appendChild(el)он срабатывает, как ожидалось.

javascript jquery onload чови
источник
посетите: эта ссылка: stackoverflow.com/questions/4845762/… Это использование fuull
Jitesh

Ответы:

144

Вы должны установить srcатрибут после в onloadслучае, f.ex:

el.onload = function() { //...
el.src = script;

Вы также должны добавить скрипт в DOM перед присоединением onloadсобытия:

$body.append(el);
el.onload = function() { //...
el.src = script;

Помните, что вам нужно проверить readystateподдержку IE. Если вы используете jQuery, вы также можете попробовать getScript()метод: http://api.jquery.com/jQuery.getScript/

Дэвид Хеллсинг
источник
11
это на самом деле не исправляет. Но если я просто использую document.body.appendChild(el)вместо $ ('body'). Append (el); тогда событие onload срабатывает, как ожидалось.
chovy
34
Вы можете помочь мне понять, почему так важен порядок?
chovy
12
@David Почему бы не добавить элемент последним, как рекомендуется в таких местах, как html5rocks.com/en/tutorials/speed/script-loading ? Это должно сделать порядок добавления прослушивателя событий и установить значение srcв нерелевантном.
Стюарт П. Бентли
3
Мне любопытно: Почему так важно , чтобы прикрепить элемент к DOM перед установкой onloadи srcатрибуты?
Джейк Уилсон
1
Если сценарий кэширован, то как только вы добавляете src, элемент загружается и onload не запускается. Добавление onload перед src гарантирует, что onload сработает для кэшированных скриптов.
JonShipman