Сделайте что-нибудь, как только плагин jQuery загрузится - PullRequest
Новая
       8

Сделайте что-нибудь, как только плагин jQuery загрузится

6 голосов
/ 01 июля 2011

Я динамически загружаю jQuery и jQuery UI на страницу, и мне нужно знать, когда jQuery UI успешно расширился jQuery.

В данный момент я использую readystate элемента script, который загружает jQuery UI, чтобы запустить мой код, но я думаю, что в этот момент скрипт загрузился, но jQuery UI hasn ' t правильно инициализирован.

Является ли единственным вариантом опроса до определения $.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 просто возвращает undefined.

Ответы [ 3 ]

6 голосов
/ 01 июля 2011

Я думаю, что это будет именно то, что вам нужно, добавьте больше зависимостей, сколько захотите. 

(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

0 голосов
/ 01 июля 2011

Я использовал этот код в некоторых проектах, чтобы гарантировать, что некоторые сценарии выполняются последовательно.Он не работал в 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);
0 голосов
/ 01 июля 2011 
<script src="jquery ui"></script>
<!-- jQuery UI has been initialized -->
<script src="my source"></script>
...