以HTML和CSS加载图像的顺序

没有可靠的方法。使用javascript意味着对于禁用脚本或不支持脚本的用户,图像将永远不会加载。

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

可能对你来说 sprite 所有较小的图像变成一个单独的图像,这将使文件大小变大,以便它们同时显示(而不是连续显示),但我不会全心全意推荐它用于任何正常的页面。这个过程只涉及调整背景位置,只显示您想要从集合中得到的图像。如果集合大小大于背景图像,并且背景图像首先开始下载,则很有可能在图像之前呈现背景。

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

1. 将您的图像预加载到DOM早期放置的JS中:

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

2. 将要首先加载的元素尽可能高地放置在CSS中

3. 通过将CSS放在DOM中的更高位置,尽早加载它

当浏览器的分析引擎找到URL时,就开始请求图像,但不能保证在其他资源完成下载之前下载。我不知道为什么在加载其他资源之前需要完全下载背景?

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

如何使用javascript动态加载图像?然后,您可以确定它是加载哪个订单的。确保先加载脚本。

您可以在第一个图像上使用on load事件来加载下一个图像),依此类推。

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