背景圖片 - 摺疊優化上方

Question

是否可以在不影響加載速度的情況下加載覆蓋整個網站的背景圖片？我在CSS加載圖像：

#wrapper {background-image:url("../images/swirl.jpg");} 

的包裝包括我的網站，所以頁面加載和加載放緩的CSS等其餘這種背景圖像被加載並影響性能如果它是堅實的背景色或留白，會是什麼樣子。

但我想知道是否有加載頁面後加載或解決方法影響頁面加載速度的方式嗎？

Answer 1

如果您準備使用一些JavaScript，您可以檢測何時加載頁面，然後設置該id以加載背景圖像。如果背景圖像設置body元素上，這應該做的伎倆（如果沒有，更改body是要應用背景圖像元素相匹配的選擇）：

window.addEventListener('load', function() { 
    document.querySelector('body').setAttribute('id', 'wrapper'); 
}) 

Answer 2

的幾點思考：

需要測試。

• 優化的實際圖像，並確保它的大小合適（你不需要5000px值得圖像時，大多數屏幕只有1366×768）。

和/或....

• 使用JavaScript的頁面加載完成後，設置背景圖片。