對於頁面內容加載時間，哪個更好，img或background-image？

我正在製作一個tumblr主題，在背景中會有一個相當大的圖像（大約2000x1600px）。不過，我需要頁面的內容，tumblr文章，加載速度相對較快。哪些選項會更快？對於頁面內容加載時間，哪個更好，img或background-image？

<style> 
    body {background-image: "background.png"} 
</style> 

<body> 
    <div id="content"> 
     /* tumblr posts go here */ 
    </div> 
</body>

或

<style> 
    img {z-index: 0} 
</style> 

<body> 
    <div id="content"> 
     /* tumblr posts go here */ 
    </div> 
    <img src="background.png"> 
</body>

來源

2015-12-30 Herossaumure

你自己試過了嗎？ – TylerH

無論您如何放置，瀏覽器都必須下載相同的圖像。 – JJJ

@TylerH不，我不知道如何製作一個tumblr主題，我目前正在查看一個空白頁面。 – Herossaumure

兩個真的不彼此不同。

如果您打開Chrome開發工具並查看網絡選項卡，則加載時間將相同，因爲圖像的大小保持不變。

但是，您可以在這裏做的是利用CSS和一些Javascript的強大功能。應用背景圖像的一類，說.with-background，然後用一些jQuery的：

$(window).load(function(){ 
    $('body').addClass('with-background'); 
});

這樣，當一切都在頁面上的其他人（包括其他圖像，從而對「window.load」聽者）是裝，應用這個類，然後加載背景圖像。

作爲一個簡單的旁註，如果您不希望自己的身體在內容加載時保持空白，您可以做的就是拍攝這張巨大的圖像，縮小圖像並模糊它（在Photoshop或其他圖像編輯軟件中）。這種方式「類似於該圖像的東西就回到了那裏」 - 所有這一切在Kb中都非常小。反過來，當課程被應用時，你會得到你的全尺寸圖像。

查看包含medium.com上圖片的帖子 - 他們也做類似的事情。這是一個設計選擇，比其他任何東西都重要。

來源

2015-12-30 17:35:16 MindRave

謝謝，我會去看看這是如何解決的（雖然我感覺我在這個項目上頭腦發熱）。 – Herossaumure

@Herossaumure肯定的事情。我只是用一個旁註更新了原始答案，以防萬一。 – MindRave

對於頁面內容加載時間，哪個更好，img或background-image？

回答

相關問題