預加載主頁上的背景圖像

我有一個主頁，其中包含大量的PHP代碼來填充divs（包括通過驗證，來自mysql數據庫和各種靜態圖像的內容進行通訊註冊）。整個頁面建立在背景淡入淡出的JavaScript之上。預加載主頁上的背景圖像

這一切的偉大工程，看起來不錯.....但是 - 加載頁面的時候，最後的「格」出現的背景圖片 - 有效地創建一個大的「空白」，直到所有的div都裝起來並且渲染背景圖像。

是否有讓瀏覽該網站時，用戶是不是跟這個空白留下任何事情之前先裝入背景圖像的方法？

我已經在使用翻轉圖像中看到，側翻的版本可以在腳本中預裝 - 這會是尋求這樣的解決方案時採用的最佳方法是什麼？

任何幫助或建議非常讚賞 - 高興，如果需要顯示的代碼 - 只是沒想到它會給出的量存在於我的腳本是太大的幫助！

感謝 JD

2011-10-24 JD2011

這個問題有點含糊。我試圖提供一些想法...但是如果你想要更精確的建議，試着在你的問題中包含一些相關的代碼snipets –

這可能不是100％相關的，但你可以考慮利用CSS精靈來加速分配小在背景到達之前可能會加載的圖像。看看http://css-tricks.com/158-css-sprites/ –

你能否提供一個樣本頁面，以便我們看到它的行動？ – andreapier

我覺得你的問題是其中的圖像加載順序。

如果您的背景圖像在所有其他元素之後加載，請確保您的背景圖像儘快加載。如果你的背景圖像是div與CSS屬性背景圖像：網址（myimage.png），包括頭標記的CSS文件。

此外，您可以保存您的背景圖片爲png interlaced。（在Photoshop中：保存爲網頁和設備> png24>隔行掃描）。這樣，圖像將會以較差的質量快速顯現，並且會隨着數據傳輸到您的瀏覽器而得到改善。

如果你想控制與jQuery的圖像加載，看這個問題：Preloading images with jQuery。但我懷疑這對你有用，因爲你的問題是元素加載的順序。

2011-11-02 00:00:04

你試過用JS預加載圖片嗎？

事情是這樣的：

<script type="text/javascript"> 
    bg = new Image(); 
    bg.src="background.png"; 
</script>

2011-11-03 21:42:56 scumah

獨立的HTTP請求。

因此，您的頁面仍然是一個帶有背景圖片的頁面，只有很少的元素。

使用javascript讓ajax請求加載頁面內容，並將此ajax函數掛接到$（document）.ready（）函數（如果使用jquery，否則可以使用window.load函數），所以內容的頁面將在頁面加載後立即加載。

2011-11-04 04:30:30

您也可以考慮使用HTML5指定的客戶端緩存文件。
這並不能完全解決的用戶第一次進入你的網站，他必須等待加載圖像，但可以給你今後一段時期內同一用戶會回來顯著的性能提升。
看here獲取更多信息。

2011-11-04 12:56:50 andreapier

üdidnt指定ü使用jQuery的或不..

if jquery 調用Image.load函數。在回調中使用所有js，以便js在加載該圖像後調用。

2011-11-04 13:03:42 sandeep

如果您希望在不使用任何JS的情況下執行此操作，則可以在頁面正文的下面包含div或img標記然後將該img標籤樣式設置爲顯示：無。它會首先加載圖像，所以當您稍後嘗試使用它時，它應該被加載並準備顯示。

2011-11-04 13:13:41

回答