测试jQueryUI是否已加载

Question

我正在尝试调试一个网站，我认为jQueryUI可能没有正确加载。如何测试是否已经加载了jQueryUI？

- waiwai933

Answer 1

if (jQuery.ui) {
  // UI loaded
}

< p >或者

if (typeof jQuery.ui != 'undefined') {
  // UI loaded
}

应该可以解决问题

- chrismacp

---

我的问题是我动态加载jQuery和jQuery.ui。有时它能够及时加载，有时则不行。如果ui没有被加载，我该如何等待（或者强制加载）它在调用任何方法之前？ - Gabriel Diaconescu

不确定这是否有太大差别，但按照 Boilerplate 对 jQuery 的测试，它们使用 window.jQuery，因此对于 jQuery UI，我使用测试 window.jQuery.ui。 - Tim B James

这对我不起作用。有人可以看一下这个jsfiddle并告诉我是否做错了什么吗？http://jsfiddle.net/vEvYv/1/ 我期望if语句的else部分运行，因为我没有加载jQuery。但是，它在第一行失败了。使用浏览器控制台打开页面（我正在使用FF），并查看jQuery未定义的行。 - Dave Haigh

@DaveHaigh - 你还没有加载JQuery。JQuery UI依赖于JQuery。 - Chris Haines

Answer 2

你需要检查 jQuery UI 库文件 和 CSS主题 是否都被加载。

jQuery UI 会在 jQuery 对象上创建属性，你可以检查：

jQuery.ui
jQuery.ui.version

为了检查必要的CSS文件是否已加载，我建议您使用Firebug，并在CSS选项卡中查找主题文件。

我以前见过这样的问题，当用户正确加载jQuery UI库但CSS主题缺失时。

- Christian C. Salvadó

---

为了检查某个特定功能是否已加载，检查代码将如下所示（例如，对于工具提示）if( typeof jQuery().tooltip != "undefined" )。 - jave.web

Answer 3

我知道这是一个老问题，但是这里有一个快速的小脚本，您可以使用它来包装所有没有关联事件的jQuery UI事物，以确保它们仅在jQuery UI加载后执行：

function checkJqueryUI() {
    if (typeof jQuery.ui != 'undefined') {
        do_jqueryui();
    }
    else {
        window.setTimeout( checkJqueryUI, 50 );
    }
}
// Put all your jQuery UI stuff in this function
function do_jqueryui() {
    // Example:
    $( "#yourId" ).dialog();
}
checkJqueryUI();

- Mike

Answer 4

这是一个关于UI对象的测试，例如：

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
  $(function(){
    // did the UI load?
    console.log(jQuery.ui);
  });
</script>

- bdl

Answer 5

您可以通过多种方式检查是否已加载jQuery UI，例如：

if (typeof jQuery.ui == 'undefined') {
   // jQuery UI IS NOT loaded, do stuff here.
}

或者

if (typeof jQuery.ui != 'function') {
    // jQuery UI IS NOT loaded, do stuff here.
}

或者

if (jQuery.ui) {
    // This will throw an error in STRICT MODE if jQuery UI is not loaded, so don't use if using strict mode
    alert("jquery UI is loaded");
} else {
    alert("Not loaded");
}

- Tushar Shukla

Answer 6

我创建了2个辅助函数来动态加载内容，并返回一个 Promise。

window.jsinclude = (javascriptfile) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = javascriptfile;
    script.type = "text/javascript";
    script.onload = resolve;
    script.onerror = reject;
    script.defer = true;
    document.head.append(script);
  });
}

window.cssinclude = (cssfile) => {
  return new Promise((resolve, reject) => {
    const cssf = document.createElement("link");
    cssf.rel = "stylesheet";
    cssf.type = "text/css";
    cssf.href = cssfile;
    cssf.onload = resolve;
    cssf.onerror = reject;
    document.head.append(cssf);
  });
}

- Thomas Nilles

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 7

嗯，你正在使用jQuery来检查jQuery的存在。如果jQuery没有加载，则$（）根本不会运行，您的回调函数也不会执行，除非您使用另一个库并且该库恰好共享相同的$（）语法。

window.onload = function(){
    if(window.jQuery){
        if(window.jQuery.ui){

        }else{
            console.log("jquery ui isn't loaded");
        }
    }else{
        console.log("jquery isn't loaded");
    }
}

- Raul Garcia