Šim*_*das 18 javascript css browser internet-explorer google-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差距是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
总结一下:
例外,所以这个规则:
既然我已经提出了这个问题,那么让我继续讨论我的问题:
如何让IE和Chrome在脚本之前请求图像？
考虑到浏览器在构建 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 方案