加載 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 只是返回 undefined。

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);