`display:none` 是否會阻止現代瀏覽器中的圖片載入？

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

響應式網頁設計倡導者通常依賴「display:none」CSS屬性來增強行動瀏覽體驗。然而，出現了一個關鍵問題：這個屬性是否會阻止圖像加載，或者仍然在後台獲取它們？

真相揭曉：不斷發展的瀏覽器

最初，將圖像的「顯示」設定為「無」將隱藏它而不影響其載入。然而，現代瀏覽器已經變得更加聰明。現在，他們可以檢測頁面的可見部分何時不需要圖像並跳過其加載。

具體而言，Chrome 能夠在映像的父元素被隱藏時阻止映像載入。可以在這裡觀察到這種行為：http://jsfiddle.net/tnk3j08s/。

防止加載的替代方法

如果您的目標是完全阻止圖像加載，請考慮以下替代方案：

• 刪除IMG 元素： 只需從文件中排除IMG 元素。
• 修改 IMG 來源： 將 IMG 的 src 屬性更新為「data:」或「about:blank」以防止實際影像擷取。

重要注意

為了使上述策略有效發揮作用，您的影像不應在初始螢幕上可見，也不應延遲載入。如果不滿足這些條件，圖像仍可能被載入但隱藏。

以上是`display:none` 是否會阻止現代瀏覽器中的圖片載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！