动态脚本加载的最佳方式

best way of dynamic script loading

本文关键字：最佳 方式 加载 脚本 动态      更新时间：2023-09-26

我需要动态和顺序地加载一些js文件(即:第一个脚本加载完成后再加载第二个脚本，第二个脚本加载完成后再加载第三个脚本，依此类推)。

问题:如何检测何时脚本已加载?我遇到了onload事件的问题——它在IE8中不会触发。看完这篇文章后，我尝试订阅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);
    };

你能建议更好的跨浏览器解决方案吗?

乌利希期刊指南:谢谢你的回答。如果我还需要加载jquery.js(例如，客户端有旧版本)，我该怎么办?

我认为你需要的是jQuery。getScript

这个函数接受一个URL和一个成功方法，你可以用它来链接加载脚本，从而依次加载它们:

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

下面是我使用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 */; });

RequireJS:

…是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但也可以在Rhino和Node等其他JavaScript环境中使用。使用像RequireJS这样的模块化脚本加载器可以提高代码的速度和质量。

表示它兼容IE 6+， Firefox2 +， Safari 3.2+， Chrome 3+和Opera 10+。

相关文章：