在 html 和 css 中加载图像的顺序答案

【问题标题】：Order of loading images in html and css在 html 和 css 中加载图像的顺序
【发布时间】：2011-01-26 06:54:45
【问题描述】：

我能否以编程方式（或者，正如我们所说的 html 和 css，从语义上）决定图像的加载顺序？

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

谢谢。

编辑：原因是我可以在加载图像时显示通知“正在加载...”，但首先加载的部分至少没有看到背景就没有意义，所以背景有先加载。

【问题讨论】：

【解决方案1】：

我发现这是一个有效的技巧：

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

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

【讨论】：

【解决方案2】：

您可以在第一个图像上使用 onload 事件来加载下一个图像）等等。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

浏览器的解析引擎一找到url就开始请求图片，但不保证在其他资源下载完成之前就下载了。我不知道为什么你需要在加载其他资源之前完全下载背景？

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

【讨论】：