如何在head.js完成加载脚本后加载一些页面内容

时间:2012-06-27 07:27:53

标签: javascript head.js

我目前正在使用head.js来推迟为我的网站加载js文件。我在我的项目中使用colorbox。问题是,有时候,颜色框没有完全加载(它在新页面而不是在对话框中打开颜色框),但是当我做几次刷新时,它最终会加载。

我想即使在head.js完全加载colorbox js文件之前,可能会打开用于打开colorbox对话框的页面内容。这是真正的原因吗?

我希望每次都能正确显示颜色框,而无需刷新。

如何在head.js完成加载所有相关文件后,才能让彩盒页面代码执行?

感谢。 nikk

2 个答案:

答案 0 :(得分:0)

将您的colorbox html代码放入div。

<div id="colorBoxDiv" style="display:none;">
</div>

在head.js的最后一行,添加以下代码:

$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();

答案 1 :(得分:0)

head.js有很多不同的选择如何做到这一点。您可以在加载所需文件时运行回调函数,或使用// queue scripts and fire a callback when loading is finished head.load("file1.js", "file2.js", function() { // do something }); // same as above, but pass files in as an Array head.load(["file1.js", "file2.js"], function() { // do something }); // you can also give scripts a name (label) head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() { // do something }); // same as above, but pass files in as an Array head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() { // do something }); // Labels are usually used in conjuntion with: head.ready() head.ready("label1", function() { // do something }); // Actually if no label is supplied, internally the filename is used for the label head.ready("file1.js", function() { // do something }); 功能api调用。 例如:

{{1}}

More in documentation