html - 是否可以规定浏览器下载图像的顺序？

Question

我有一张全屏图片幻灯片，每张幻灯片大约有 20 张图片。 250kb。这是相当多的下载，因为我希望每个图像都能被看到，所以我将 slider 设置为在下载前 4 个图像之前不启动。唯一的问题是，当在浏览器(chrome 最新版本)中运行时，它似乎同时下载所有图像，这意味着前 4 张图像与其他 20 张图像大约同时完成加载。

有没有办法告诉浏览器按时间顺序下载它们，即。如果我的 html 是这样的:

<div id="slider">
<img src="one.jpg">
<img src="two.jpg">
<img src="three.jpg">
<img src="four.jpg">
<img src="five.jpg">
<img src="six.jpg">
...
</div>

从 one.jpg 开始等到完成然后从 two.jpeg 等开始？

Answer 1

您可以在 javascript 中使用 img onload 属性。

var firstImage = new Image();
firstImage.src = 'some url';
firstImage.onload = function(){
 var secondImage = new Image();
 secondImage.src = 'some url';
 secondImage.onload = function(){
   //etc
 }
}

显然，使用递归函数进行这些调用才是实际的实现，但我想确保您看到了核心概念。