html如何让背景图片优先加载

最近在做一个小项目,但遇到一个小问题,网站加载时,背景图加载特别慢,尤其是首页,会出现一段时间的白底色,给人感觉网站加载很慢,体验很差。虽然原则上服务器带宽足够以及本地带宽足够的情况下,影响并不大,但带宽小的情况下,这问题就影响很大了。

通过检查发现网站整个加载时间大概在6s,但首页的背景图却在最后才被加载。由于背景图是通过css中的background-image实现,查了下发现大部分主流浏览器都会调低该标签图片加载优先级,等所有主页面加载完后才会加载该图片。知道原因后,就是如何解决了。

其实小编用的方法很蠢很直接,因为是首页背景,那我就让该图第一加载不就可以了吗。所以我在靠前位置写了个div,<div style="width:0px; height:0px; overflow:hidden"><img src="背景图地址"></div>这样背景图就会优先加载出来了,也就不会出现首页会有一大段时间的白色背景现象了。

配张图:

html如何让背景图片优先加载

原创文章,作者:果皮,如若转载,请注明出处:https://www.peels.cn/227.html