如何顯示：無;效果的CSS移動設備？

如果我們隱藏了一些使用display：none的東西;例如：圖像，它仍然會通過渲染引擎下載嗎？如果是的話，這是否意味着在移動設備上打開相同的網頁，下載會不必要的額外重量？如何顯示：無;效果的CSS移動設備？

這可能進一步意味着修改相同的網頁移動可能是一個壞主意。請指教。謝謝。

2010-07-13 jhonny

是的，整個頁面被下載（隱藏的元素和所有）。在頁面被瀏覽器的CSS引擎處理之前，display:none沒有意義。

2010-07-13 11:42:36 Jake

您可能比我更瞭解這一點，但是對於瀏覽器而言，要不要下載圖像，直到沒有「無」DOM元素的請求爲止，這會不會是一個非常合理的優化？你有參考證明這真的從來沒有完成的瀏覽器？ – 2010-07-13 11:50:36

恐怕我沒有，現在也沒有機會進行我自己的任何測試。我認爲大多數設計師/開發人員不希望延遲加載隱藏的圖像，直到它們被隱藏，因爲這會在請求圖像時產生「閃爍」效果，頁面加載時的短暫延遲比在使用期間更好。話雖如此，我明白了爲什麼這可能對移動瀏覽器有用......但我有一種感覺，開發人員只在需要時才包含圖像。（即，在需要時動態添加圖像img標記，而不是顯示它）。 – Jake 2010-07-13 13:51:30

感謝您的回覆。您是否建議使用其他方法從網頁中去除額外的內容以優化其移動版本？如果一切正在下載並且圖片中的主題是iPhone，那麼整個內容可以在優化之後輕鬆地提供，並且不需要顯示：無。 – jhonny 2010-07-13 16:31:33

有幾種方法可以阻止正在下載的圖像，圖像是內嵌的，或者是CSS樣式中的背景圖像，或者是通過媒體查詢引入的。它的工作原理幾乎所有的移動設備（除了「小狐10.0+」是仍然下載的image.-看到蒂姆Kadle的測試結果的唯一設備）

蒂姆·卡德萊茨的「媒體查詢&資產下載測試結果的研究在：

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

它說，對於背景圖像，隱藏父元素。如果您無法做到這一點，則使用媒體查詢將背景圖像設置爲僅在屏幕或設備大小達到特定大小時下載。只需定義你想隱藏/不要下載的媒體查詢。這不是很奇妙嗎？

而且再創輝煌測試中使用的，就這麼簡單，在： http://timkadlec.com/mq/test4.php

在此測試，您只需調整您的瀏覽器窗口，以模仿閹「桌面」或「移動」看羯羊它是與下載有關圖像媒體查詢。您只需點擊您想要測試的每個場景的鏈接。

來源

2013-02-17 17:02:53 Frankie

如何顯示：無;效果的CSS移動設備？

回答

相關問題