javascript – 如何使浏览器(IE和Chrome)在脚本之前请求图像?

注意:如果您在第一时间阅读此文章,您可以直接跳转到UPDATE,因为它更准确地解决了这个问题。

所以我有一个网页。

在头上我有一个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背景图片总是在页面上的所有脚本之后加载?

如果是,如何确保这些图像在脚本之前加载?有没有一个方便方便的解决这个问题?

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 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即使在脚本稍后出现在源代码中时也会在图像之前请求脚本

现在我提出了这个问题,让我继续谈谈我的问题:

How to make IE and Chrome request the
images before the scripts?

最新的浏览器,这些天,这种不可预测的并行预加载的东西,出于性能原因,并且基本上破坏了任何机会来创建加载组件的命令。一旦完整的DOM被加载,这当然会发生。
JQuery lazy loading of images相同的故事,已经打破了一段时间。
http://stackoverflow.com/questions/4743135/how-to-make-the-browser-ie-and-chrome-request-images-before-scripts

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 如何使浏览器(IE和Chrome)在脚本之前请求图像?