jQuery 插件加载后执行一些操作

Question

我正在将 jQuery 和 jQuery UI 动态加载到页面中，并且我需要知道 jQuery UI 何时成功扩展了 jQuery< /代码>。

目前，我正在使用加载 jQuery UI 的脚本元素的 readystate 来触发我的代码的运行，但我认为在这一点上，脚本已经已加载，但 jQuery UI 尚未正确初始化。

在定义 $.ui 之前轮询是唯一的选择吗？

这是我当前正在处理的代码：

(load_ui = (callback) ->
    script2 = document.createElement("script")
    script2.type = "text/javascript"
    script2.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"
    script2.onload = script2.onreadystatechange = ->
      console.log 'readystate:', @readystate
      if @readystate == "loaded" or @readystate == "complete"
        console.log "jquery ui is loaded"
        callback ($ = window.jQuery).noConflict(1), done = 1
        $(script,script2).remove()
    document.documentElement.childNodes[0].appendChild script2
    console.log 'jquery ui script element appended to page'
(window, document, req_version, callback, $, script, done, readystate) ->
  if not ($ = window.jQuery) or req_version > $.fn.jquery or callback($)
    console.log "begin loading jquery"
    script = document.createElement("script")
    script.type = "text/javascript"
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + req_version + "/jquery.min.js"
    script.onload = script.onreadystatechange = ->
      if not done and (not (readystate = @readyState) or readystate == "loaded" or readystate == "complete")
        console.log "jquery is loaded, now loading jquery ui"
        load_ui(callback)        

    document.documentElement.childNodes[0].appendChild script
    console.log 'jquery script element appended to page'
) window, document, "1.6.1", ($, L) ->
    console.log $
    console.log $.ui.version

由于某种原因，jquery ui 脚本元素的readystate 只是返回未定义。

Answer 1

我认为这将完全满足您的需要，根据需要添加更多依赖项。

(function () {
        function getScript(url, success) {
            var script = document.createElement('script');
            script.src = url;

            var head = document.getElementsByTagName('head')[0];
            var completed = false;
            script.onload = script.onreadystatechange = function () {
                if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                    completed = true;
                    success();
                    script.onload = script.onreadystatechange = null;
                    head.removeChild(script);
                }
            };
            head.appendChild(script);
        }

        getScript("Scripts/jquery-1.6.1.js", function () {
            getScript("Scripts/jquery-ui-1.8.11.js", function () {
                alert($.ui);
            });
        });
})();

使用 IE7、IE8、IE9、Firefox、Safari、Chrome 和 Opera 进行测试

Answer 2

<script src="jquery ui"></script>
<!-- jQuery UI has been initialized -->
<script src="my source"></script>

Answer 3

我在一些项目中使用了这段代码，以确保某些脚本按顺序运行。它在 IE 上不起作用（而且我没有时间调试），但在其他一切上都工作得很好。

var node = document.createElement("script");
$.extend(node, {
    type: 'text/javascript',
    charset: 'utf-8',
    async: false,
    defer: true,
    src: /*...*/
});
$(node).bind('load', loadedCallback);
$('head')[0].appendChild(node);