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

Question

我目前正在使用 head.js 来延迟为我的网站加载 js 文件。我在我的项目中使用彩盒。问题是，有时，颜色框没有完全加载（它在新页面而不是在对话框中打开颜色框），但是当我进行几次刷新时，它终于加载了。

我想这可能是为了打开颜色框对话框的页面内容甚至在 head.js 完全加载颜色框 js 文件之前就已加载。这是真正的原因吗？

我希望每次都能正确显示彩盒，而无需刷新。

如何仅在 head.js 完成加载其所有依赖文件后才执行彩盒页面代码？

谢谢。尼克

Answer 1

将您的颜色框 html 代码放在一个 div 中。

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

在 head.js 的最后一行，添加以下代码：

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

Answer 2

head.js 有很多不同的选项来做到这一点。您可以在加载所需文件时运行回调函数，或使用test功能 api 调用。例如：

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

更多文档