注意:如果你第一次阅读本文,你可以直接跳到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也是这样做的
总结一下:
例外如此规则:
现在我已经阐明了这个问题,让我继续讨论我的问题:
如何让IE和Chrome在脚本之前请求图像?
发布于 2018-03-29 08:59:13
大多数最新的浏览器对于这种不可预测的并行预加载的东西,出于性能方面的原因,并且基本上破坏了创建加载组件命令的任何机会。这当然会在完整的DOM被加载后发生。与使用JQuery延迟加载图像一样,现在已经被打破了一段时间。
发布于 2018-03-29 09:35:58
一种可能的选择是在脚本开始时加载所需的所有图像。
https://stackoverflow.com/questions/-100007848
复制相似问题