平滑地預載大量背景圖像

我有一個網站使用大型（60-100k）背景圖像，因頁面而異。平滑地預載大量背景圖像

當用戶第一次加載頁面時，首先加載頁面內容，並在短時間後出現背景圖像。據我瞭解，這是瀏覽器中的預期行爲，但它會使加載頁面在較慢的連接上看起來頗爲「顛簸」。

我曾經想過隱藏帶有加載「掩膜」的頁面，在加載背景圖像時被JS刪除......但這仍然是一個相當醜陋的方法。

我該怎麼做才能讓頁面內容和背景圖像同時顯示給用戶？

來源

2010-07-08 jsims281

更好的方法可能是使用jquery，並在加載後淡入背景圖像。你也可以嘗試在用戶點擊下一頁之前預載下一張圖片，使其更加平滑。

如果您延遲顯示的內容直到圖像顯示出來，這隻會刺激用戶。他們（可能）主要是在那裏獲取信息，所以不要觸及任何延遲該過程的事情。

這個例外是一些附庸風雅的網站，其中不瞭解網站的人會點擊它們，除了漂亮外，他們不關心任何東西。

來源

2010-07-08 16:15:17

100k背景圖像對我來說聽起來有點諷刺。我會讓背景顏色與背景圖像相似。然後用戶可以開始使用該網站。預加載所有背景圖片可能是最好的主意。 – 2010-07-08 16:27:48

是的，說實話，這是一個富有藝術氣息的創意。有大約30個獨立的背景圖片，無法知道用戶會下一個，因此預加載有點不起眼，我認爲？你的想法在背景圖像中褪色聽起來相當不錯，但我認爲我們會使用它，歡呼聲。 – jsims281 2010-07-10 22:47:40

這裏最好的解決方案是嘗試找到一種方法來縮小圖像。那裏有一些很好的壓縮工具。我建議您查看ImageMagick，一些JPEG專用工具（http://jpegclub.org/）或PNG專用工具（http://www.aboutonlinetips.com/optimize-and-compress-png-files/）。

但是做什麼你特別要求 - 隱藏網頁中的一切，直到它準備好，然後把它加載 - 你可以使用jQuery和做這樣的事情：

$(function(){ 
    var bgimage = new Image();  
    bgimage.src="{your giant image's URL goes here}";  

    $(bgimage).load(function(){ 
     $("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();     
    }); 
});

這樣做是什麼它會等到所有元素都加載到頁面上，然後創建一個新的Image對象。我們將來源指向您的較大圖像文件。當完成加載後，我們更改背景以使用這個新加載的圖像，因爲瀏覽器緩存它會立即加載。

我有fadeIn（），如果你想隱藏頁面上的所有內容，直到它準備好。這意味着你應該隱藏起來。

由於某種原因，fadeIn（）比show（）更好，或者直接通過removeClass（）移除一個「隱藏」類，如果採取這種方法。採用後兩種方法時，標籤似乎會調整其高度以適應頁面內容，從而導致不能完整顯示背景圖像。

老實說，雖然，我真的不推薦這種方法：P

至少，不是如果你要隱藏頁面上的所有內容，直到它準備好。

這可能是被顯示爲顯示背景圖像只有當它準備好了，避免了部分加載圖像的好方法...

較慢的載荷僅僅是使用大圖像的權衡。

來源

2010-07-08 17:00:01

您可以使用data URIs來緩解現代瀏覽器中的此問題，並回到當前針對IE 6/7的技術。

來源

2010-07-08 17:20:23 lawnsea

平滑地預載大量背景圖像

回答

相關問題