лучший способ динамической загрузки скрипта

Question

Мне нужно загружать некоторые js-файлы динамически и последовательно (то есть второй скрипт загружается после завершения загрузки первой, третьей после второй и т. Д.).

Вопрос: как определить, когда скрипт был загружен? У меня возникли проблемы с событием onload - оно не срабатывает в IE8. Прочитав this , я попытался подписаться на onreadystatechange и написал очень уродливый код для загрузки скрипта:

function loadScript(url, callback) {
        var isLoaded = false;
        var script = document.createElement('script');

        script.onreadystatechange = function () {
            if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) {
                if (callback) callback();
            }
        };
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', url);
        document.head.appendChild(script);
    };

Можете ли вы предложить лучшее кросс-браузерное решение без таких уловок?

UPD: Спасибо за ответы. Что мне делать, если мне нужно также загрузить jquery.js (например, клиент имеет старую версию):)?

Answer 1

Я думаю, что вам нужно jQuery.getScript

Функция принимает URL и метод успеха, с помощью которого вы можете последовательно загружать скрипты и, следовательно, загружать их последовательно:

jQuery.getScript( url, function() { 
  jQuery.getScript( url2, function() 
    {/*... all 2 scripts finished loading */}
  );
});

Answer 2

Вот мой фрагмент для загрузки нескольких скриптов с использованием jQuery.getScript ();

function getScripts(inserts, callback)
{
    var nextInsert = inserts.shift();
    if (nextInsert != undefined)
    {
        console.log("calling"+nextInsert);
    jQuery.getScript(nextInsert, function(){ getScripts(inserts, callback); })
            .fail(function(jqxhr, settings, exception){alert("including "+nextInsert+" failed:\n" +exception)});
    }
    else
    {
        if (callback != undefined) callback();
    }
};

Использование:

var includes = [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
];

getScripts(includes, function(){ /* typically a call to your init method comes here */; });

Answer 3

RequireJS :

... - загрузчик файлов и модулей JavaScript.Он оптимизирован для использования в браузере, но может использоваться в других средах JavaScript, таких как Rhino и Node.Использование модульного загрузчика скриптов, такого как RequireJS, улучшит скорость и качество вашего кода.

Говорит, что он совместим с IE 6+, Firefox2 2+, Safari 3.2+, Chrome 3+ и Opera 10+.

Answer 4

В Chrome мы можем использовать onload и onerror для замены onreadystatechange.