[英]Properly loading scripts and dependencies in correct order using head.js?
[英]How to load some page content after head.js finishes loading scripts
我目前正在使用head.js来推迟为我的网站加载js文件。 我在我的项目中使用colorbox。 问题在于,有时颜色盒不会完全加载(它会在新页面而不是对话框中打开颜色盒),但是当我进行几次刷新时,它最终会加载。
我想可能是因为甚至在head.js完全加载colorbox js文件之前,就已经加载了用于打开colorbox对话框的页面内容。 这是实际原因吗?
我希望每次无需重新刷新即可正确显示颜色框。
我如何保持colorbox页面代码仅在head.js完成加载所有依赖文件后才能执行?
谢谢。 尼克
将您的colorbox html代码放在div中。
<div id="colorBoxDiv" style="display:none;">
</div>
在head.js的最后一行中,添加以下代码:
$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.