如何在加載所有鏈接和腳本之前顯示加載div

我添加了<div>，它顯示「加載」圖像到<body>標記中。它看起來很酷，但不幸的是加載div和圖像只會在加載大部分加載過程完成後才顯示在屏幕上，在腳本和css鏈接加載或至少開始加載後。這可能是因爲身體位於<head>標記下，並且在開始加載頭之前甚至沒有經過分析。我可以在文檔頭部顯示加載div /圖像嗎？我試圖添加<script>，然後creatElement()和appendChild()，但沒有body尚未追加孩子。可以做些什麼來使加載div /圖像更早顯示？如何在加載所有鏈接和腳本之前顯示加載div

來源

2017-04-19 exebook

嗯...把你的腳本標籤放在身體最後？ –

你必須覆蓋整個頁面與您的動畫/文本不顯示其他正在加載的東西。

所有其他js的東西（除了外部來源）進入$(document).ready();函數。

當window準備就緒時，將執行以下片段中的動畫。

$(window).ready(function() { 
 
    $('#untilContentLoads').hide(); 
 
});

#untilContentLoads { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* background: url() no-repeat center; <-- use that for some kind of gif/svg animation */ 
 
}

<div id="untilContentLoads">Loading</div>

來源

2017-04-19 17:14:32 Felix

正如@Meirion提到的，把你的腳本標記結尾。但是，我可能會建議使加載圖像成爲身體的背景圖像嗎？如果需要，可以隨身體上的課程切換。

來源

2017-04-19 17:15:37 itamar

如果你想迅速做到這一點，你可能想在body標籤的末尾添加腳本像這樣

<html> 
<head> 
</head> 
<body> 
<div id="loading"/> 
<script> 
/*Here your code will have a notion of what is loading*/ 
</script> 
</body>

，你可能要採取的另一種方法是使用body.onload的腳本選項。按照同樣的例子，需要以解析

<html> 
<head> 
</head> 
<body onload="functionForLoading()"> 
    <div id="loading"/> 
</body> 
</html>

來源

2017-04-19 17:30:32 cabolanoz

HTML文檔，以找出如何，直到它被讀取和DOM顯示，所以你不會是能夠與體（可見位）互動創建。

但是，您可以在標題中指定CSS，一旦加載後，該標題將快速應用於DOM。

如果你想微調的最快的外觀我建議

讓你的HTML文檔儘可能小
把你的裝載機DIV的第一件事情就是負載（即第一個在體內）
做出純CSS微調，並把這個片段在頁面的頭（沒有一個單獨的文件 - 內聯在頭）
個人資料頁面，並完善「時間第一漆」
LAZ Ÿ負荷影像/在頁面底部放腳本標記
使用延遲/異步如果可能的話（http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html）

，讓文檔加載速度快，你想讓它儘可能輕。除了body標籤之外，你可以儘可能去除所有內容，並用腳本加載內容，但這會大大增加複雜性。

來源

2017-04-19 17:31:33

如何在加載所有鏈接和腳本之前顯示加載div

回答

相關問題