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

注意：如果您第一次阅读本文，您可以直接跳转到UPDATE，因为它可以更准确地解决问题。如何让浏览器（IE和Chrome）在脚本之前请求图像？

所以我有一个网页。

在脑子里，我有一个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的差距是在浏览器解析jQuery的源代码的时间。）

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

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

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

UPDATE

我制成的测试用例。这是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测试版）

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源代码中出现的顺序进行请求。

铬表明，让我写在首位这一问题的问题。在图像之前请求脚本。

OPERA（11）

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

如Firefox，歌剧院做是正确的，也。 :D

综上所述：

Firefox和Opera所请求的资源，因为它们出现在源代码中。

异常，所以这条规则：

Internet Explorer的请求CSS背景图像持续
即使脚本出现在源代码

后来的Chrome请求脚本的图像前

现在我列出了这个问题，让我继续我的问题：

如何在脚本之前让IE和Chrome请求图片？

来源

2011-01-20 Šime Vidas

“这是浏览器的标准行为吗？”是的，它是更糟糕的CSS背景IMG上：悬停 – Knu 2011-01-20 05:17:36

如果我可以，我想问一个反问：是什么原因是很重要的是脚本/图像按特定的顺序加载？大多数情况下，我很好奇，如果有一个潜在的问题，改变订单为您解决。 – zzzzBov 2011-01-20 19:58:35

@zzzzBov我想尽可能快地要求图像，因为这意味着，游客将看到他们越快。显然，让图像更快显示在屏幕上是件好事。 – 2011-01-20 20:02:21

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

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

现在，我敢肯定，这一切的实现依赖，你总是可以找到它来到他们将加载图像的浏览器，但考虑到这是什么意思建立一个DOM，然后填写进去。

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

如果因此不会剥离它，应该有一个红点在这里和代码之间：\

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

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

来源

2011-01-20 04:35:34 jcolebrand

一种可能的选择是加载所有这些图像日在你需要的脚本开始。有关更多信息，请参阅this TechRepublic article。

来源

2011-01-20 06:43:08 Behrang

大多数最新的浏览器这种东西不可预知的并行预压，这些天，出于性能考虑的，基本上破坏为加载组件订单的机会。这当然会在完整的DOM被加载后发生。同样的故事与JQuery lazy loading of images，已打破了有一段时间了。

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

来源

2011-01-20 07:57:22 Shinnok

我们使用.load的。就绪jQuery的通话

像内部解决了这个问题as属性指示浏览器应该期望的对象的种类。因此，这增加了你页面上加载的所有图像中是最高的优先级，但不能更改优先级“JS - >图像”

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

宣言没有为允许甚至在JS负荷预加载图像，增强图像载入的优先级。

Preloading feature

来源

2011-04-19 18:53:08

使用图像通过相对预紧功能= “预加载” 属性

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

的：

来源

2016-10-11 11:05:14 VadimB

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

回答

相关问题