如何使浏览器(IE和Chrome)在脚本前请求图像？
注意：如果你第一次阅读本文，你可以直接跳到UPDATE，因为它更准确地解决了这个问题。
所以我有一个网页。
在头上我有一个CSS背景图像：
<style>
#foo { background-image:url(foo.gif); }
</style>
在页面底部我加载我的脚本：
<script src="jquery.js"></script>
<script src="analytics.js"></script>
由于脚本位于页面底部，并且位于页面顶部的CSS，因此我认为浏览器会首先加载图像。但是，这似乎并非如此。
这是Chrome Dev Tools的屏幕截图：
http://www.vidasp.net/media/cssimg-vs-script.png
如你所见，图像在脚本之后加载。
现在，我的第一个问题是：
这是浏览器中的标准行为吗？在页面上的所有脚本之后，CSS背景图像是否始终加载？
如果是的话，我如何确保这些图像在脚本之前加载？有没有一个简单和方便的解决这个问题？
我做了一个测试用例。这是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源代码中出现的顺序进行请求。
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也是这样做的
总结一下：
- Firefox和Opera正在请求源代码中显示的资源。
例外如此规则：
- Internet Explorer请求CSS背景图像最后
- 即使在源代码中稍后出现脚本，Chrome也会在图像之前请求脚本
现在我已经阐明了这个问题，让我继续讨论我的问题：
如何让IE和Chrome在脚本之前请求图像？
回答 2
Stack Overflow用户
发布于 2018-03-29 08:59:13
大多数最新的浏览器对于这种不可预测的并行预加载的东西，出于性能方面的原因，并且基本上破坏了创建加载组件命令的任何机会。这当然会在完整的DOM被加载后发生。与使用JQuery延迟加载图像一样，现在已经被打破了一段时间。
Stack Overflow用户
发布于 2018-03-29 09:35:58
一种可能的选择是在脚本开始时加载所需的所有图像。
https://stackoverflow.com/questions/-100007848
复制相似问题