加载 jQuery 插件后执行某些操作 [英] Do something once jQuery plugin has loaded

问题描述

我正在将 jQuery 和 jQuery UI 动态加载到页面中，我需要知道 jQuery UI 何时成功扩展了 jQuery.

目前我正在使用加载 jQuery UI 的脚本元素的 readystate 来触发我的代码的运行，但我认为那时，脚本已加载，但 jQuery UI 尚未正确初始化.

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

这是我目前正在处理的代码:

(load_ui = (callback) ->script2 = document.createElement("脚本")script2.type = "文本/javascript"script2.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"script2.onload = script2.onreadystatechange = ->console.log 'readystate:', @readystate如果@readystate ==加载"或@readystate ==完成"console.log "jquery ui 已加载"回调 ($ = window.jQuery).noConflict(1), done = 1$(script,script2).remove()document.documentElement.childNodes[0].appendChild script2console.log '附加到页面的 jquery ui 脚本元素'(窗口、文档、req_version、回调、$、脚本、完成、就绪状态)->如果不是 ($ = window.jQuery) 或 req_version >;$.fn.jquery 或回调($)console.log "开始加载 jquery"脚本 = document.createElement("脚本")script.type = "文本/javascript"script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + req_version + "/jquery.min.js"script.onload = script.onreadystatechange = ->如果未完成并且 (not (readystate = @readyState) 或 readystate == "loaded" 或 readystate == "complete")console.log "jquery 已加载，现在正在加载 jquery ui"load_ui(回调)document.documentElement.childNodes[0].appendChild 脚本console.log '附加到页面的 jquery 脚本元素') 窗口、文档、1.6.1"、($, L) ->控制台日志 $控制台.log $.ui.version

由于某种原因，jquery ui 脚本元素的 readystate 只返回 undefined.

解决方案

我认为这将完全满足您的需求，尽可能多地添加依赖.

(function () {函数getScript(网址，成功){var script = document.createElement('script');脚本.src = 网址；var head = document.getElementsByTagName('head')[0];var已完成=假；script.onload = script.onreadystatechange = function () {if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {完成=真；成功();script.onload = script.onreadystatechange = null;head.removeChild(脚本);}};head.appendChild(脚本);}getScript("Scripts/jquery-1.6.1.js", function () {getScript("脚本/jquery-ui-1.8.11.js", function () {警报($.ui)；});});})();

<块引用>

测试 IE7、IE8、IE9、Firefox、Safari、Chrome 和 Opera

I'm dynamically loading jQuery and jQuery UI into a page, and I need to know when jQuery UI has successfully extended jQuery.

At the moment I'm using the readystate of the script element that loads jQuery UI to trigger the running of my code, but I think that at that point, the script has loaded, but jQuery UI hasn't been properly initialised.

Is the only choice to poll until $.ui is defined?

Here's the code that I'm currently wrestling with:

(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

For some reason the readystate of the jquery ui script element just returns undefined.

解决方案

I think this will do exactly what you need, add more dependency as much as you like.

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

Tested with IE7, IE8, IE9, Firefox, Safari, Chrome and Opera

这篇关于加载 jQuery 插件后执行某些操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！