如何在head.js完成加載腳本後加載一些頁面內容

Question

我目前使用head.js推遲爲我的網站加載js文件。我在我的項目中使用了colorbox。問題是有時候，colorbox並沒有完全加載（它會在新頁面而不是對話框中打開colorbox），但是當我做了幾次刷新時，它最終會加載。

我想這可能是打開colorbox對話框的頁面內容被加載，甚至在colorbox js文件被head.js完全加載之前加載。這是真正的原因嗎？

我想每次都正確顯示colorbox而不需要刷新。

如何讓colorbox頁面代碼僅在head.js加載完所有依賴文件後執行？

謝謝。 nikk

Answer 1

將您的colorbox 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 
}); 

More in documentation