如何使脚本之前的浏览器（IE和Chrome）要求的图像？ [英] How to make the browser (IE and Chrome) request images before scripts?
问题描述
的 注意：的如果您正在阅读本文的拳头时，您可以直接跳转到更新，因为它更准确地解决了上述问题。
所以我得到了一个网页。
在脑子里，我有一个CSS背景图像：
＆LT;风格＆GT;
#foo {背景图像：网址（foo.gif）; }
＆LT; /风格＆GT;
在页面的底部，我加载我的脚本：
＆LT;脚本SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =analytics.js的＆GT;＆下; /脚本＆GT;
由于脚本位于页面的底部，并在页面顶部的CSS，我假定浏览器将首先加载图像。然而，这似乎不是这种情况。
这是从Chrome浏览器开发工具的截图：
正如你所看到的，脚本后的图像加载。
（垂直蓝线是页面加载 DOMContentLoaded事件。巨大的45ms的差距是在浏览器解析jQuery的源$ C $ C的时间。）
现在，我的第一个问题是：
是在浏览器这个标准的行为吗？不要CSS背景图像总是在页面上的所有脚本加载后？
如果有，我怎么能确保该脚本之前的图像加载？有没有一种简单方便的解决这个问题？
更新
我做了一个测试案例。这是HTML源代码code：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;身体{背景图像：网址（image1.jpg）}＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT; ＆所述; IMG SRC =image2.jpg＆GT; ＆LT; / DIV＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/.../jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://vidasp.net/js/tablesorter.js＆GT;＆下; /脚本＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
正如你所看到的，我有一个CSS背景图像，一个常规的形象，和两个脚本。而现在的结果：
INTERNET EXPLORER（9测试版）
结果
Internet Explorer的第一个请求常规图像，那么这两个脚本，并在 CSS图像最后一个
火狐（3.6）
结果
Firefox是这样做的权利。所有资源请在它们出现在HTML源$ C $ C的顺序。
反转片（最新的稳定）
结果
Chrome的说明，让我写在首位这一问题的问题。图像之前的脚本要求。
OPERA（11）
结果
如Firefox，歌剧院做是正确的，太。 ：D
要总结一下：
- Firefox和Opera，因为它们出现在源$ C $ C所请求的资源。
例外所以这条规则：
- Internet Explorer的请求CSS背景图像最后一个
- Chrome的要求，即使脚本出现在源$ C $ C 后的图像前脚本
现在，我制定了这个问题，让我移动到我的问题：
如何让IE和Chrome要求
脚本前图像？解决方案大多数最新的浏览器这种东西未predictable并行preloading这些天，对于性能方面的原因，基本上破坏创建的任何机会订购装载组件。这当然发生一次完整的DOM已经加载。
同样的故事与图像jQuery的延迟加载的，这已经被打破，现在一段时间。Note: If you are reading this for the fist time, you may jump directly to the UPDATE, since it addresses the issue more accurately.
So I got a web-page.
In the head I have a CSS background-image:
<style> #foo { background-image:url(foo.gif); } </style>At the bottom of the page I load my scripts:
<script src="jquery.js"></script> <script src="analytics.js"></script>Since the scripts are located at the bottom of the page, and the CSS at the top of the page, I assumed that browsers will load the image first. However, this seems not to be the case.
This is a screenshot from the Chrome Dev Tools:
As you can see, the image loads after the scripts. (The vertical blue line is the
page loadDOMContentLoaded event. The huge 45ms gap is the time in which Chrome parses the jQuery source code.)Now, my first question is:
Is this standard behavior in browsers? Do CSS background-images always load after all the scripts on the page?
If yes, how could I make sure that those images load before the scripts? Is there an easy and convenient solution to this problem?
UPDATE
I made a test case. This is the HTML source code:
<!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>As you can see, I have one CSS background-image, one regular image, and two scripts. And now the results:
INTERNET EXPLORER (9 beta)
Internet Explorer requests the regular image first, then the two scripts, and the CSS image last.
FIREFOX (3.6)
Firefox is doing it right. All resources are requested in the order in which they appear in the HTML source code.
CHROME (latest stable)
Chrome demonstrates the issue that made me write this question in the first place. The scripts are requested before the images.
OPERA (11)
Like Firefox, Opera is doing it right, too.
:D
To sum up:
- Firefox and Opera are requesting the resources as they appear in the source code.
Exceptions so this rule:
- Internet explorer requests CSS background-images last
- Chrome requests scripts before images even when the scripts appear later in the source code
Now that I laid out the issue, let me move on to my question:
How to make IE and Chrome request the images before the scripts?
解决方案Most latest browsers to this kind of unpredictable parallel preloading of stuff these days, for performance reasons and basically ruining any chance of creating an order for loading components. This of course happens once the full DOM has been loaded. Same story as with JQuery lazy loading of images, which has been broken for a while now.
这篇关于如何使脚本之前的浏览器（IE和Chrome）要求的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
