預加載圖像陣列以加快加載速度
[英]Preload array of images for faster load
問題描述
我在SO上讀過有關預加載圖像數組以更快地加載Web頁面的信息，以便當應用程序需要顯示它們時，它們已經加載並且可以立即顯示。 但是我的疑問是在哪里包含代碼片段：
- 在頁面底部或
在開始（
<head>）？另外，我還讀到為了快速加載，應該在底部包含所有JavaScript。 哪種更好的方法？ 還是我必須在兩種方式上都妥協？
javascript代碼：
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'images/bg.jpg',
'images/logo1.png',
]);
</script>
4 個解決方案
解決方案1
1 2013-01-13 12:47:57
即使所有其他答案在本質上都是正確的。 他們似乎並沒有直接向您講話。
您的腳本未使用任何DOM元素。 這意味着完全不必擔心等待DOM加載。
下載<script/>時暫停布局渲染始終是一個問題（除非您使用新的HTML5功能，例如async ），這就是為什么他們傾向於將其放置在</body>之前。
通過將其放置在</body>之前，不會停止渲染。 從性能角度來看，迭代這樣的微小陣列可能只是微優化。
順便說一句，您不需要將數組包裝在$()即可使用.each() ，而應使用$.each 。
function preload(arrayOfImages) {
$.each(arrayOfImages, function(index, image){
$('<img/>')[0].src = image;
});
}
解決方案2
0 2013-01-13 12:38:00
通常，將函數調用和頁面完成加載后要執行的所有操作放入其中
$(document).ready(function() {
// Handler for .ready() called.
});
（請參閱文檔 ）。
這也適用於您對preload(...)調用。 當您使用$('<img/>')[0].src = this ，瀏覽器將根據以下注釋緩存圖像： 使用jQuery預加載圖像
編輯：正如Konstantin指出的那樣， <script/>標記在DOM樹中的位置僅扮演次要角色。
解決方案3
0 2013-01-13 12:44:15
HTML頁面的頂部和底部是相關的，因為這是瀏覽器讀取頁面的方式。 頂部的東西先於底部的東西完成。
關於圖像預加載，您應該在頁面頂部<head> 。 為什么？ 因為您不需要使用它。 該頁面的其余部分尚未准備就緒，很可能還沒有放置圖像的地方。
我們通常將JavaScript放在頁面底部，因為我們想在DOM准備就緒時做一些事情。 您也可以將其放在頂部！ 但是您將必須使用$(document).ready(function(){}); 為了確定它會按預期工作。
因此，在頁面其余部分也正在加載的同時，在頂部（或通過使用window.onload）啟動預加載。 除非您使用CSS進行操作，或者綁定在頁面頂部發生的特定div的load事件並在此處預加載圖像，否則從頂部進行操作實際上不會帶來任何好處。
解決方案4
0 2013-01-13 12:51:02
為什么不在BODY部分的最開始制作DIV並將DIV移到可見區域之外？
更快地預加載圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.