Question

注意： 如果您是第一次阅读此内容，您可以直接跳到更新，因为它可以更准确地解决问题。

所以我有了一个网页。

在头部我有一个CSS背景图片：

<style>
    #foo { background-image:url(foo.gif); }
</style>

在页面底部我加载了我的脚本：

<script src="jquery.js"></script>
<script src="analytics.js"></script>

由于脚本位于页面底部，而CSS位于页面顶部，因此我假设浏览器将首先加载图像。但是，情况似乎并非如此。

这是Chrome开发工具的截图：

http://www.vidasp.net/media/cssimg-vs-script.png

如您所见，图像在脚本之后加载。（垂直蓝线是~~页面加载~~ DOMContentLoaded事件。巨大的45ms差距是Chrome分析jQuery源代码的时间。）

现在，我的第一个问题是：

这是浏览器中的标准行为吗？在页面上的所有脚本之后是否总是加载CSS背景图像？

如果是，我如何确保在脚本之前加载这些图像？这个问题有一个简单方便的解决方案吗？

更新

我做了一个测试用例。这是HTML源代码：

<!DOCTYPE html>
<html>
<head>
    <style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
    <div> <img src="image2.jpg"> </div>
    <script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
    <script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>

如您所见，我有一个CSS背景图像，一个常规图像和两个脚本。现在的结果是：

INTERNET EXPLORER（9 beta）

http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.png

Internet Explorer首先请求常规图像，然后是两个脚本， CSS图像最后。

FIREFOX（3.6）

http://www.vidasp.net/media/loadorder-results/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.png

Firefox正确行事。所有资源都按照它们在HTML源代码中的显示顺序进行请求。

CHROME（最新稳定）

http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png

Chrome展示了让我首先撰写此问题的问题。在图像之前请求脚本。

OPERA（11）

http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png

与Firefox一样， Opera也是正确的。 :D

总结一下：

Firefox和Opera正在请求源代码中显示的资源。

例外，所以这条规则：

Internet Explorer请求CSS后台映像
即使脚本稍后出现在源代码中，Chrome也会在图像之前请求脚本

现在我已经解决了这个问题，让我继续讨论我的问题：

如何让IE和Chrome请求脚本之前的图像？

Answer 1

目前大多数最新的浏览器都出现了这种不可预测的并行预加载的东西，出于性能原因而且基本上破坏了创建加载组件订单的机会。这当然是在加载完整DOM后发生的。与JQuery lazy loading of images相同的故事，现在已经被打破了一段时间。

Answer 2

考虑到浏览器在构建DOM之前无法执行任何操作。首先它解析整个页面，然后它加载图像（即使它们来自CSS）。

你可以加载CSS或页面内联的DATA段中的图像，这可能会加快这些速度，或者你可以注入jQuery参考页面加载后（比如设置一个500毫秒的计时器）但显然会在一定程度上影响可用性。

现在，我非常确定这是所有依赖于实现的，您总是可以找到一个可以加载图像的浏览器，但是考虑构建DOM然后填充它的意义。

http://en.wikipedia.org/wiki/Data_URI_scheme

如果SO没有剥离它，那么这里和代码之间应该有一个红点：\

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4Tzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

这就是我的意思，使用DATA URI方案

Answer 3

可能的选择是在脚本开头加载所需的所有图像。有关详细信息，请参阅this TechRepublic article。

Answer 4

我们在.ready jquery调用

中使用.load解决了这个问题

类似的东西：

jQuery(document).ready(function($){
  jQuery('#my_container img').load(function($){
     /* SCRIPT */
  });
});

Answer 5

通过rel =“preload”属性

使用图像预加载功能

<link rel="preload" href="images/mypic.jpg" as="image">

as 属性表示浏览器应该期望的对象类型。因此，这会在您在页面上加载的所有图像中添加最高优先级，但不会更改优先级“JS - ＆gt; Image”

<link rel="preload" href="images/mypic.jpg">

没有 as 的声明允许在js加载之前预加载图像，从而增加了图像加载优先级。

Preloading feature

如何让浏览器（IE和Chrome）在脚本之前请求图像？

5 个答案: