0

客观的

我正在尝试构建一个在我的用户网站上放置一个浮动按钮的小部件。单击按钮时，我会以灯箱的形式显示一个网络表单（位于我的服务器上） - 我目前正在使用Fancybox。

问题

在这种情况下，我的小部件依赖于两个依赖库，jQuery并且Fancybox. 在调用我的 fancybox 代码来加载我的 URL 之前，如何确保它们都已加载？我尝试查看一些 SO 问题（here、here、here和其他一些问题）以及Alex Marandon 的出色教程，但它们似乎并不依赖于另一个库，例如我的情况下的 fancybox。

我做了类似下面的事情，但我的主要问题是使用异步加载 Fancybox 库$.getScript，因此当我在几行之后调用它们时无法调用它们。

/******** Our main function ********/
function main() {
jQuery(document).ready(function($) { 
  /******* Load FANCYBOX *******/
  var fancy_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "fancybox/source/jquery.fancybox.css?v=2.1.5",
    media: "screen"
  });
  fancy_link.appendTo('head');
  var fancy2_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7",
    media: "screen"
  });
  fancy2_link.appendTo('head');

  var fancyboxScript = widgetURL + "fancybox/source/jquery.fancybox.pack.js?v=2.1.5";
  $.getScript(fancyboxScript);

  var fancyboxScript2 = widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7";
  $.getScript(fancyboxScript2);

  /******* Load CSS *******/
  var css_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "myWidget.css" 
  });
  css_link.appendTo('head');

  /******* Load Javascript *******/   

  var widgetJS = widgetURL + "widgetFunction.js";
  $.getScript(widgetJS); 

  /******* Load HTML *******/
  var jsonp_url = widgetURL + "myWidgetCall.php?callback=?";

  $.getJSON(jsonp_url,params, function(data) {
    $('#widget-container').html(data.html);
  });
});
}

我不是该领域的专家，因此如果有其他替代方法可以实现上述相同目标，我将很乐意尝试。

4

1 回答 1

0

$.getScript 有一个回调成功函数：

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

因此，您可以按如下方式进行：

$.getScript(fancyboxScript, function(script, textStatus, jqXHR){ 
      "call your methods here";
});
于 2013-10-28T08:39:42.330 回答