加载后如何在 JQuery 上执行回调？答案

【问题标题】：How do I perform a callback on JQuery once it's loaded?加载后如何在 JQuery 上执行回调？
【发布时间】：2010-05-11 19:02:13
【问题描述】：

我正在异步下载 JQuery：

function addScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('jquery.js');

// non-jquery code ...

// jquery specific code like: $()...

因此 - 一旦 JQuery 被加载，我如何调用我的 JQuery 特定代码（因为因为我正在下载我的 JavaScript 异步 - 它没有阻塞，这很好，但试图在 JQuery 之前执行我的 JQuery 特定代码已经已加载）。

【问题讨论】：

只是出于好奇，为什么要异步加载脚本？
因为我不希望他们在下载时被阻止，而且响应能力非常重要。
阻止什么，究竟是什么？页面加载？如果这是您关心的问题，只需将代码实例化放在页面底部，就在 </body> 标记之前...
@dclowd9901 在某些情况下，没有必要在页面加载时加载任何脚本。
@dclowd9901 太棒了 - 遇到了这个搜索当前问题，只是想我会为找到它的其他人做出贡献。

标签： javascript jquery callback

【解决方案1】：

您可以自己托管 jquery 文件的副本。然后可以在jquery.js底部添加回调函数的调用：

/* jquery code goes here ... */

my_onload_callback();

【讨论】：

【解决方案2】：

对我来说这很有效（在 FireFox 33.0.3 中测试）：

    if(typeof(jQuery) == "undefined"){

        //create onload-callback function
        window["__9384nalksdfalkj04320"] = function(){
            console.log("jQuery=" + jQuery);
        };

        //load jQuery asynchronously
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("onload", "__9384nalksdfalkj04320();"); //register onload-callback listener function
        script.setAttribute("src", "http://code.jquery.com/jquery-latest.min.js");
        document.head.appendChild(script);
    }

【讨论】：

【解决方案3】：

您可以将LabJs 内联到您的页面（可能是每个页面）。不利的一面是，您一遍又一遍地内联脚本。从好的方面来说，LabJs 非常小 - 4k 缩小 - 它可以让您使用非常简单的代码处理跨浏览器的复杂异步加载模式：

<script>
// Minified LabJs goes here
</script>
<script>
function init() {
    // Your code after jquery loads goes here
}

$LAB
.script('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
.wait(init);
</script>
</body>

【讨论】：

【解决方案4】：

~~我对标准 Javascript 不太了解，但您可以尝试这样做：~~

var script_object = new addScript('jquery.js');

script_object.onLoad('addScript("my_jquery_related.js")');

诚然，这是在黑暗中的一个大镜头。

如果这不起作用，可能会通过您的函数作为 JS 加载器中的回调变量：

addScript(url, function(){ function_to_call();})

function addScript(url, call_back_function) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);

    call_back_function.call;
}
addScript('jquery.js');

这就是我得到的全部：\

【讨论】：

我实际上想调用一个已经存在于 HTML 页面内的 jquery 函数。所以它会更像 script_object.onLoad(my_jquery_related_code())');
@dclowd9901，我收到一个错误，“script_object.onLoad 不是函数”
是的，我担心会发生这种情况。我认为 onLoad 只保留给window 或document。用另一个选项更新了答案...
你可以在你的函数中return script，然后.onload = my_jquery_related_code 的结果与你原来的相似:)
call_back_function 会在脚本加载之前被调用。