Note:如果您是第一次阅读本文,您可以直接跳到更新,因为它更准确地解决了问题。
所以我得到了一个网页。
在头部我有一个 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 http://www.vidasp.net/media/cssimg-vs-script.png
As you can see, the image loads after the scripts.
(The vertical blue line is the page load DOMContentLoaded event. The huge 45ms gap is the time in which Chrome parses the jQuery source code.)
现在,我的第一个问题是:
这是浏览器中的标准行为吗? 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 背景图像、一张常规图像和两个脚本。现在结果是:
互联网探索者(9 测试版)
http://www.vidasp.net/media/loadorder-results/ie2.png http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.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/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.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/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png http://www.vidasp.net/media/loadorder-results/chrome1.png
Chrome 演示了让我首先写这个问题的问题。在图像之前请求脚本。
歌剧 (11)
http://www.vidasp.net/media/loadorder-results/opera1.png http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png http://www.vidasp.net/media/loadorder-results/opera2.png
像火狐浏览器一样,Opera 也做得对. :D
总结:
- Firefox 和 Opera 正在请求源代码中显示的资源。
例外情况,所以这条规则:
- Internet Explorer 最后请求 CSS 背景图像
- Chrome 在图像之前请求脚本,即使脚本稍后出现在源代码中
现在我已经阐述了这个问题,让我继续我的问题:
如何让 IE 和 Chrome 请求
脚本之前的图像?