创建使用其他JS库

我试图建立一个把我的用户的网站的浮动按钮的控件可嵌入的JavaScript控件。点击按钮后，我会以lightbox的形式显示一个Web表单（位于我的服务器上） - 我目前使用的是Fancybox。

问题

在这种情况下我的小部件依赖于两个依赖库，jQuery和Fancybox。如何在我致电我的fancybox代码加载我的URL之前确保它们都已加载？我尝试着看几个SO问题（here，here和here和其他一些问题）以及Alex Marandon's great tutorial，但他们似乎并不依赖于另一个库，例如我的fancybox。

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

/******** 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); 
    }); 
}); 
}

我在这个领域的专家，因此，如果有其他的替代方法来实现上述同样的目标，我会很乐意去尝试。

来源

2013-10-28 chongzixin

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

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

所以，你可以把它如下：

$.getScript(fancyboxScript, function(script, textStatus, jqXHR){ 
     "call your methods here"; 
});

来源

2013-10-28 08:39:42 sabotero

感谢您的答复。所以在我的情况下，如果我的一个脚本依赖另一个加载，我应该将它们全部嵌入到它们自己的回调函数中？像回调函数{$ .getScript（fancyboxScript2，function（...）{$ .getScript（widgetJS，function（...）{/ ** LOAD HTML **/ – chongzixin

是的，你可以尝试更好地构造你的代码更易读等等，但基本上是的，你必须等待脚本加载，所以等待成功回调函数被调用。 – sabotero

你也可以尝试requireJS。 – sabotero

创建使用其他JS库

回答

相关问题