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

【问题标题】：How to make the browser (IE and Chrome) request images before scripts?如何让浏览器（IE 和 Chrome）在脚本之前请求图像？
【发布时间】：2011-06-12 04:53:16
【问题描述】：

注意：如果你是第一次阅读这篇文章，你可以直接跳到更新，因为它更准确地解决了问题。

所以我得到了一个网页。

在头部我有一个 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

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

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

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

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

更新

我做了一个测试用例。这是 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 背景图像、一个常规图像和两个脚本。现在结果：

互联网探索者（9 测试版）

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

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

火狐 (3.6)

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

Firefox 做得对。所有资源都按照它们在 HTML 源代码中出现的顺序被请求。

Chrome 演示了让我首先写这个问题的问题。在图像之前请求脚本。

歌剧（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 请求脚本之前的图像？

【问题讨论】：

"这是浏览器的标准行为吗？"是的，对于 css background img on :hover 来说更糟
如果可以的话，我想问一个反问：为什么以特定顺序加载脚本/图像很重要？大多数情况下，我很好奇更改顺序是否可以为您解决根本问题。
@zzzzBov 我希望尽快请求图像，因为这意味着访问者会更快地看到它们。显然，让图像尽快出现在屏幕上是一件好事。
Vidas，如果问题太大，您可以添加一个简短的脚本以在文档加载时加载脚本。 < 1s 加载时间足够快恕我直言。人们只会看到他们正在寻找的东西。
@zzzzBov 是的，我会尝试的。请注意，在这种情况下，延迟为 45 毫秒。但在其他情况下，它可能会高得多。但是，不管延迟如何，通常最好先请求图像，这就是我想要实现的跨浏览器。

标签： javascript css internet-explorer browser google-chrome

【解决方案1】：

通过 rel="preload" 属性使用图像预加载功能

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

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

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

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

Preloading feature

【讨论】：

【解决方案2】：

我们在 .ready jquery 调用中使用 .load 解决了这个问题

类似：

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

【讨论】：

这是个好主意。您对这种方法的可靠性有经验吗？
是的，我在一个基于 wordpress 的网站的插件上做了这个，效果很好。
但是，这个解决方案存在一个问题。图片加载事件有可能在 DOM 就绪事件之前触发。在这种情况下，脚本永远不会被加载。我想可以通过使用原生 API 绑定加载事件（例如，onload 属性）来规避这个问题，因为这种方法不需要 jQuery。

【解决方案3】：

考虑到浏览器在构建 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 方案

【讨论】：

@drackenstern 你能详细说明那些数据段吗？我没听说过。 ...是的，我认为延迟加载脚本将是一个解决方案。然而，这是一个相当不愉快的解决方案。
等我吃完午饭回来
@drachenstern 好的，不急:)
@drachenstern 啊哈，有趣 :) 但是，这种方法显然不是一个好的解决方案，因为它会禁用图像缓存。
@SimeVidas 我知道，但我想看看可以做些什么来帮助你。现在，如果它在 CSS 中，那么 CSS 将被缓存，这将加快一些速度。但是不，除其他外，您还有大小限制。我认为只是浏览器供应商没有实现相同

【解决方案4】：

一个可能的选项是在脚本开始时加载您需要的所有图像。请参阅this TechRepublic article 了解更多信息。

【讨论】：

那个链接指向的是techrepublic，而不是这里。请问有好的链接名称吗？
这种方法（图像预加载）是否会确保在浏览器中的外部脚本之前请求图像？
@David Dorward，如果他只使用标题属性，链接文本就可以了。
“详见 techrepublic”与“详见此处”……嗯……悬停……等等……哦，它的 techrepublic。
这没有帮助（我测试过）。

【解决方案5】：

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

【讨论】：

我不想延迟加载图像，我想要相反：我想先加载图像，尽快。