javascript - jquery append一个js文件，如何在载入完成执行回调？

Question

$('body').append('<script src="xxx.js"></script><script src="yyy.js"></script>');
这样子载入一个js，有没有办法在载入完成时执行一个回调函数。

Answer 1

试了这样

<code>    $('body').on('load', function(){
        alert('xx');
    }).append('<script src="xxx.js"></script><script src="yyy.js"></script>');
</code>

不行。。。

这样子可以。。。

<code>var $jsArr = $('<script src="xxx.js"></script><script src="yyy.js"></script>');
var loaded = 0;
$jsArr.each(function() {
    $.getScript(this.src, function(){
        if (++loaded===$jsArr.length) {
            alert('xxx');
        }
    });
});
</code>

不知道 有没有更好的方法

Answer 2

为什么不$.getScript呢

<code class="lang-javascript">$.getScript("/do.js",function(){
    console.log("加载完毕");
})
</code>

加点料...
jQuery.getScript(url,success(response,status))
载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。
该函数是简写的 Ajax 函数，等价于：

<code>$.ajax({
  url: url,
  dataType: "script",
  success: success
});
</code>

Answer 3

<code class="lang-javascript">function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    // IE
    if (script.readyState) {
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { // others
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}
</code>

使用：

<code class="lang-javascript">loadScript("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js", function () {
    alert('loaded');
});
</code>

JSFiddle例子：
http://jsfiddle.net/starandtina/L3QaM/