在动态插入的 jQuery 库完成加载后执行我的 jQuery 脚本答案

【问题标题】：Execute my jQuery script after dynamically inserted jQuery library has finished loading在动态插入的 jQuery 库完成加载后执行我的 jQuery 脚本
【发布时间】：2012-02-10 11:19:11
【问题描述】：

我通过<script>标签在页面上动态插入jQuery库：

jq = document.createElement('script');
jq.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
b.appendChild(jq);

然后我有一些 jQuery 脚本需要在 jQuery 库完成加载并准备好使用后运行：

$(f).load(function() {
    $(f).fadein(1000);
});

如何让它等待 jQuery 加载？

【问题讨论】：

Rob 在下面的回答是完美的，尽管让我在这里强调一下，你正在做的是 Modernizr 的（一个很好的）部分。 :D

标签： javascript jquery events onload jquery-events

【解决方案1】：

在待插入的脚本标签处指定onload事件：

function onLoad() {
    $(f).load(function() {
        $(f).fadein(1000);
    });
}

jq = document.createElement('script');
jq.onload = onLoad;   // <-- The magic
jq.src = '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
b.appendChild(jq);

另一种方式，如果无法控制脚本插入代码，可以使用轮询器：

(function() {
    function onLoad() { ... } // Code to be run

    if ('jQuery' in window) onLoad();
    else {
        var t = setInterval(function() { // Run poller
            if ('jQuery' in window) {
                onLoad();
                clearInterval(t);        // Stop poller
            }
        }, 50);
    }
})();

【讨论】：