5

从我能够找到的所有内容中，大型 CSSbackground-image不应该阻止 javascript 执行。不幸的是，在 Firefox 和 Chrome 上似乎确实如此。

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

当 DOM 和 Facebook SDK 准备就绪时，我正在使用 jQuery$(document).ready和 Facebook 的window.fbAsyncInit方法来运行 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 附加另一个带有真实背景图像的样式表（以及针对较小屏幕的媒体查询），但这似乎很棘手。

4

3 回答 3

6

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

浏览器对它们同时针对每个域运行的请求数量有限制，同样，Web 服务器也对它同时处理来自同一用户的请求数量有限制。有时限制低至同时下载一两个。

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

$(document.body).css('background-image', 'url(...)');
于 2013-03-10T21:12:06.717 回答
0

因为您正在使用该$(document).ready()功能，所以 jQuery 是故意的，等待所有图像等都加载完毕。这是为了防止出现一些问题，例如如果我要调用：

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

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

要延迟加载图像，请添加一个body类，并且仅在添加该类后才显示图像。这可以像这样完成：

在js中： $(document).ready(function() { $('body').addClass('loaded'); } 在css中： .loaded #div-with-background-image { background-image: url ('...'); }

或者，您可以使用该$(window).load(function() {...})方法而不是$(document).ready

于 2013-03-10T21:01:23.277 回答
0

a) 有一些方法可以减少图像的文件大小，而用户不会注意到图像细节中的任何内容，只需寻找一些可以做到的库或软件。

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

c) 使用 Facebook 等社交媒体连接需要大量工作量时间，您应该考虑不要在头部加载 facebook sdk，而是在正文中加载。

d) 这是 facebook 开发人员关于如何优化社交插件性能的帖子：http: //developers.facebook.com/blog/post/530/

e) 检查一下：现代浏览器中的非阻塞 javascript 和 css。还需要吗？

于 2013-03-10T21:01:40.640 回答