背景图片 - 折叠优化上方

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的页面加载完成后，设置背景图片。