大型CSS背景图像在加载时阻止Javascript

Question

从我能够找到的所有内容中,我background-image不应该阻止javascript执行.不幸的是,在Firefox和Chrome上,情况确实如此.

如果我在Chrome上进行硬刷新,我可以看到背景缓慢加载(在慢速连接上),然后一旦完成我的JavaScript执行,显示页面的其余内容.

我正在使用jQuery $(document).ready和Facebook的window.fbAsyncInit方法在DOM和Facebook SDK准备就绪时运行JavaScript.

我不确定它是否相关,但背景是在CSS中设置的:

body {
    background: black url(...) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
}

我已经在使用CSS媒体查询加载较小的图像以获得较小的屏幕分辨率,并使背景图像变小不会解决问题; 它会隐藏症状.

我还应该做些什么来确保背景图像不会阻止JavaScript执行？

我的想法是加载一个虚拟背景图像然后让JavaScript附加另一个带有真实背景图像的样式表(以及用于较小屏幕的媒体查询),但这看起来很糟糕.

Answer 1

加载背景图片不会阻止Javascript运行.原因很可能是加载图像会使脚本首先被加载.

浏览器对每个域同时运行的请求数量有限制,类似的Web服务器对同一用户同时处理的请求数量有限制.有时,限制可以低至一次或两次同时下载.

如果要在图像之前加载脚本,请使用脚本,以便在CSS中设置背景图像.这样你就知道在图像开始加载之前脚本已经加载了:

$(document.body).css('background-image', 'url(...)');