[英]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.