HTML和CSS中图片加载的顺序

Question

我能否通过编程的方式（或者，因为我们正在讨论 html 和 css，语义上）决定图像加载的顺序？

我希望先加载背景图片，然后在 $(window).load 时调用一些 JavaScript，这样做是否足够（例如，body-background 在第 40 行，其他图片在 css 文件中稍后），还是必须使用 JavaScript（如果是，是否有简单的解决方案？）

谢谢。

编辑：原因是我可以在加载图像时显示提示“正在加载...”，但是先加载的部分如果没有至少看到背景就不会有意义，因此必须首先加载背景。

- Adam Kiss

Answer 1

没有可靠的方法。使用 JavaScript 会导致禁用脚本或不支持它的浏览器的用户无法加载图像。

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

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

- Andy E

---

我实际上成功地使用了Sprite技术，将颜色相似的图像分组成PNG-8 :) - Adam Kiss

Answer 2

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

1. Preload your image with JS that you place early in the DOM:

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

2. Place the element you want to load first as high up in the CSS as possible

3. Load your CSS as early as possible by placing it higher in the DOM

- OSOFAST

Answer 3

你可以在第一张图片上使用onload事件来加载下一张图片，以此类推。

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

- Mic

---

如果您聪明到足以在浏览器中禁用JavaScript，那么您也足够聪明去启用它，以便查看您选择的网站上的丰富内容 :) - Michael Butler

@MichaelButler，谢谢，下次有人跟我说“不支持JS用户”的时候，我会用这个词组。 - Mic

这个代码有点老了，但是风险在于img1可能会失败。你可以选择的另一种做法是在每个加载图片（以及失败的图片）上设置一个计数器标志，然后按顺序显示它们。 - oak

Answer 4

浏览器解析引擎找到 URL 后立即开始图像请求，但不保证在其他资源下载完成之前下载。我不确定为什么您需要在加载其他资源之前完全下载背景？

哦，整个文档的 onload 事件会在所有资源下载完成后触发。

- PatrikAkerstrand

---

原因是我可以在加载图像时显示“正在加载...”的通知，但是如果至少看到背景，先加载的部分将毫无意义。 - Adam Kiss

Answer 5

如何使用JavaScript动态加载图像？这样你就可以确保它们被加载的顺序。请确保脚本先被加载。

- TiansHUo

---

关闭JavaScript的用户将永远不会看到它们。 - Andy E

@Andy E - 是的，那是个问题。 - Adam Kiss

大多数用户（抱歉）不够聪明，无法关闭Java脚本，而一些浏览器如Safari和Android浏览器使其成为一项真正的任务。 - baash05