Question

我有一张全屏图片幻灯片，每张约有20张图片。 250KB。这是非常适合下载的，因为我想要按顺序看到每个图像，我设置滑块不会开始，直到下载前4个图像。唯一的问题是，当在浏览器中运行时（chrome最新版本），它似乎同时下载所有图像，这意味着前4个图像与其他图像大约在同一时间完成加载。

有没有办法告诉浏览器以cronalogical顺序下载它们，即。如果我的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
 }
}

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

是否可以向浏览器指定下载图像的顺序？

1 个答案: