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(...)');

Answer 2

因为您正在使用$(document).ready()函数，所以jQuery是有目的的，等待所有图像等加载完毕。这是为了防止一些问题，例如我打电话：

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

...然后jQuery想知道图像是否已加载。

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

在js中： $（document）.ready（function（）{ $（ '主体'）addClass（ '加载'）; } 在CSS中： .loaded＃div-with-background-image { background-image：url（'...'）; }

或者，您可以使用$(window).load(function() {...})方法代替$(document).ready

Answer 3

a）有一些方法可以减少图像的文件大小，而无需用户注意图像细节中的任何内容，只需查找一些可以执行此操作的库或软件。

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

c）使用像Facebook这样的社交媒体连接需要花费大量的工作时间，你应该考虑不在头脑中加载facebook sdk，而是在体内加载。

d）以下是facebook开发者关于如何优化社交插件性能的帖子：http://developers.facebook.com/blog/post/530/

e）检查出来：Non-blocking javascript and css in modern browsers. Is it still needed?

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

3 个答案: