Question

我可以以编程方式（或者，正如我们所说的那样html和css，语义上）决定图片应该以哪种顺序加载？

我想首先加载背景图片，然后在$(window).load上调用som javascript，是否足以将其留在浏览器上（例如，身体背景在线40，其他图片稍后在css文件）或者我是否必须使用javascript（如果有，是否有一些简单的解决方案？）

谢谢。

编辑：原因是我可以在加载图片时显示'loading ...'的注意事项，但是如果没有至少看到背景，首先加载的部分就没有意义，所以背景有首先加载。

Answer 1

没有可靠的方法。使用JavaScript意味着永远不会为禁用脚本的用户或不支持脚本的浏览器加载图像。

页面的几乎所有外部资源（其中一个例外是脚本）都是异步加载的，从浏览器解析开始。这意味着它最有可能是首先加载的较小文件，较大的文件需要更长的时间才能下载和显示。

您sprite可能会将所有较小的图像转换为单个图像，这会使文件大小变大，因此它们会同时显示（而不是连续显示），但我不会整个 - 非常推荐它用于任何普通页面。该过程仅涉及调整背景位置以仅显示您想要的图像。如果集合大小大于背景图像并且背景图像首先开始下载，则背景很可能在图像之前呈现。

Answer 2

我发现这是一个有效的伎俩：

使用早期放在DOM中的JS预加载图像：

<script type="text/javascript">
    (new Image()).src="../img/loader.gif";
</script>

Answer 3

只要浏览器的解析引擎找到了网址，就会启动图片请求，但不保证在其他资源下载完成之前下载该图像。我不确定为什么在加载其他资源之前需要完全下载后台？

哦，一旦下载了所有资源，就会触发整个文档的onload-event。

Answer 4

如何使用javascript动态加载图片？然后你可以确定它的加载顺序。确保首先加载脚本。

Answer 5

您可以在第一张图片上使用onload事件来加载下一张图片，等等。

img1.src = 'url1';
img1.onload = function(){
  ...
  img2.src = 'url2';
  img2.onload = function(){
    ...
  }
}