`display:none` 真的會阻止行動裝置上的圖片載入嗎？

響應式設計中關於圖像加載和“display:none”的欺騙性聲明

許多Web 開發教程提倡使用“display: none” CSS 屬性可對行動瀏覽器隱藏內容並加速頁面載入。然而，現實情況更加微妙。

「display:none」對圖片載入的影響

與普遍看法相反，「display:none」不會自動阻止行動瀏覽器中的圖片載入。現代瀏覽器已經變得善於根據相關性優化內容載入。雖然圖像可能被隱藏，但如果瀏覽器認為有必要，瀏覽器仍然可以載入它。

在某些情況下，例如當影像的父元素被隱藏時（如提供的 JSFiddle 所示），較新版本的Chrome 將跳過載入過程。然而，這並不是所有瀏覽器或所有圖像場景的通用行為。

防止不必要載入的替代方法

如果主要目標是防止不必要的圖片載入行動瀏覽器，請考慮以下替代方案：

• 避免初始元素包含： 不要在HTML 中完全包含IMG元素，或為其指派一個空的“src”屬性。
• 延遲載入圖片： 利用基於 JavaScript 的延遲載入技術當使用者向下捲動頁面時動態載入圖片。

的影響其他場景中的「display:none」

需要注意的是，「display:none」對初始視口上方的影像有不同的效果。對於非延遲載入且出現在第一畫面的圖片，「display:none」將阻止顯示但不載入。

以上是`display:none` 真的會阻止行動裝置上的圖片載入嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！