加載文件時是否加載CSS文件中的每個圖像？

比方說，我有我的整個網站的CSS在1個CSS文件，所以它是相當大的，我想知道，如果一個頁面使用3類與下面的東西，請求從服務器的3個圖像，可以說有像50這些在整個css文件中，是否每個人都從服務器調用/請求或只需要3個頁面？加載文件時是否加載CSS文件中的每個圖像？

background-image:url(http://localhost/images/btn3.gif);

來源

2009-08-19 JasonDavis

有一個簡單的方法可以找出（好吧，不僅僅是要求堆棧溢出）。把它放到一個CSS文件中：

#nonExistantElement { 
    background-image: url(myScript.php); 
}

並使該腳本通過寫入文件或其他東西來記錄命中。

好的，我現在就自己做了。原來：不，它沒有得到文件。（測試火狐3.5.2，IE7，Chrome瀏覽器2.0）

來源

2009-08-19 12:06:59 nickf

感謝您的測試，我想知道我是否應該切掉一些舊的/未使用的東西，但現在不會傷害太多 – JasonDavis 2009-08-19 12:15:30

您可以簡單地使用Firefox中的NET選項卡，使用背景圖像的元素... – 2009-08-19 12:16:58

@Itay，是的，或者我可以做到這一點，並跨瀏覽器進行測試;） – nickf 2009-08-19 12:21:21

瀏覽器將加載顯示頁面所需的內容。儘管我可以想象各種瀏覽器可以使用某些緩存技術，並預取它們在CSS文件中看到的所有內容。

來源

2009-08-19 12:02:06

你的答案在於螢火

來源

2009-08-19 12:08:58 Jeff

是的，沒有。 Firebug不記錄所有由Firefox製作的HTTP請求。例如，它不記錄'favicon.ico'請求。 – 2009-08-19 12:14:19

@Ionut G. Stan：這是因爲favicon被下載用作瀏覽器用戶界面的一部分，因此被瀏覽器本身請求，而不是網頁。所有與頁面內容相關的請求，包括CSS背景圖像，均由Firebug記錄。那麼，他們是如果它的工作;-) – NickFitz 2009-08-19 12:18:38

我不這麼認爲。在懸停時加載懸停僞類（鼠標懸停）所需的圖像，並且在第一次出現時可能會有明顯的延遲（除非您使用欺騙手段預加載）。

來源

2009-08-19 12:13:48

很好的例子情況+1 – JasonDavis 2009-08-19 12:45:09

不，只有當頁面上存在類或id時，纔會請求圖像。

來源

2009-08-19 12:14:35 ErnieStings

如果你做想要在頁面加載時不可見的圖像「預加載」，那麼你可以使用各種技巧，比如在加載時在屏幕外顯示圖像。需要「預加載」的最常見情況是背景圖像在懸停時發生變化，否則在用戶第一次懸停並導致圖像改變時會出現不可接受的滯後。這個問題最常見的解決方案稱爲「CSS Sprites」。您可以將默認，懸停和（如果存在）活動圖像合併到一個文件中，一個在另一個之上，然後只需更改背景圖像偏移：hover和：active。

來源

2009-08-19 16:03:35

加載文件時是否加載CSS文件中的每個圖像？

回答

相關問題