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

从我所能找到的一切来看，一个大型CSS

背景图像不应该阻止javascript的执行。不幸的是，在Firefox和Chrome上似乎都是这样

如果我在Chrome上进行硬刷新，我可以看到后台缓慢加载（在慢速连接上），然后一旦加载完成，我的JavaScript就会执行，显示页面的其余内容

我使用jQuery的
$（document）.ready
和Facebook的
window.fbAsyncint
方法在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附加另一个带有真实背景图像的样式表（以及针对较小屏幕的媒体查询），但这似乎有点不对劲。
因为您使用的是
$（document）.ready（）
函数，jQuery是故意的，等待所有图像等都加载完毕。这是为了防止出现一些问题，例如，如果我打电话：

$('#div-with-background-image').css('background')

…然后jQuery会想知道图像是否已加载

要延迟加载图像，请添加
主体
类，并且仅在添加类后显示图像。可以这样做：

在js中：
$（文档）.ready（函数（）{
$（'body'）.addClass（'loaded'）；
}
在css中：
.已用背景图像加载#div{
背景图片：url（“…”）；
}

或者，您可以使用
$（window.load（function（）{…}）
方法而不是
$（document.ready
a）有一些方法可以减少图像的文件大小，而用户不会注意到图像细节中的任何内容，只需查找一些库或软件即可

b） 我真的不认为CSS是这里的主要问题，我认为您的javascript太重（查看您的开发工具或firebug中的执行时间）

 C）使用像脸谱网这样的社交媒体连接需要大量的工作时间，你应该考虑不要将脸谱网SDK加载到头上，而是要在正文中执行。
d） 以下是facebook开发者关于如何优化社交插件性能的帖子：
e） 检查一下：
加载背景图像不会阻止Javascript运行。原因很可能是加载图像会阻止脚本首先被加载

浏览器对每个域同时运行的请求数量有限制，类似地，web服务器对同一用户同时处理的请求数量也有限制。有时限制低至同时下载一到两次

如果希望在图像之前加载脚本，请使用脚本以便在CSS中设置背景图像。这样，您就知道在图像开始加载之前脚本已经加载：

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

我已经成功地将JS放在应用程序中，并且不依赖外部文件，但是如果这是一个问题，那么我建议您按照我的方式进行黑客攻击。不理想，希望这里有人有更好的答案不，你倒过来了。
ready
事件不会等待内容加载，即
load
事件。加载文档后会触发
ready
事件。这是一个很好的理论。不幸的是，我尝试将其延迟到JavaScript运行，但它确实会更快地启动JavaScript。这并不重要，因为在页面加载时触发的AJAX请求无论如何都会延迟。我认为你说的对，并发请求的数量是瓶颈；我将尝试将JS和CSS组合成更少的文件，并将我的图像放入精灵中。