html - 背景图片会影响网站加载速度吗

Question

在我的索引页面上，我有一个背景图片，它是由一些javascript动态添加到div中的。添加的内联样式如下。

element.style {
background: rgba(0, 0, 0, 0)    
url("http://www.myshop.com/wp-content/themes/mytheme/images/media/bg-footer.jpg") 
no-repeat scroll 50% -287.5px;
}

我已经使用以下类更改了背景图片

.footer-bg{
background: rgba(0, 0, 0, 0) 
url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg") 
no-repeat scroll 50% -59.5px !important;
margin-top: 20px;
}

我已经使用 !important 来覆盖由 javascript 加载的背景样式并且它起作用了。更改后这个网站比以前慢了一点。我怀疑网站会同时加载样式还是它会完全忽略第一个吗？

如果站点加载两种样式并使用 !important 应用一个样式，那么它需要一些加载时间，对吗？

这些样式覆盖是否直接影响网站加载速度。请指导我。

谢谢

Answer 1

如果该背景添加在同一类 (.footer-bg) 上，那么您可以使用以下方法覆盖 -

.footer-bg [style]{
   background: rgba(0, 0, 0, 0) url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg") !important;
}

希望对你有帮助。