Question

对于某种幻灯片，我正在尝试实现一个聪明的图像预加载器，它应该如下工作：

在幻灯片放映时，会显示第一张图像并开始加载图像在背景中按顺序2,3,4 ......
如果用户决定切换到图像n（可以通过搜索或拇指或...）和触发的预加载（从1.）尚未加载n，在1中建立的顺序（2,3,4，...）将重新组织为n作为第一个元件。

2的其他可能性可能是暂停预加载，加载图像n并继续预加载，但我更喜欢第一个想法，因为这将使您可以自由地进行更复杂的重新排序，例如：（n，n + 1，n + 2，...，last，1st-not-loaded，2nd-not-loaded，......）。

到目前为止，我只是做了一个简单的预加载循环：

for (var i = 0; i < issue.pages.length; i++)
{
  log("preloading image from URL " + issue.pages[i].imageUrl);
  var img = new Image();
  img.onload = function()
  {
    log("reading loading image " + this.src);
  };
  img.src = issue.pages[i].imageUrl;
}

工作正常，但似乎阻止下载其他图像：如果我打电话

imageN = new Image();
imageN.src = issue.pages[n].imageUrl;

在其他地方（onClick of thumb），而循环静止加载的图像，imageN将不会在循环中的顺序转动之前加载。

有什么想法吗？

Answer 1

据我所知，没有办法停止或暂停使用javascript加载图像。然而，控制图像加载顺序的一种巧妙方法是将它们的加载事件链接在一起。这是an example（使用jQuery）。

在示例中，我有一个数组imgQueue，我将其用作队列和一个函数loadNextImage，它从队列中抓取图像以加载并在图像为loadNextImage时调用加载完成。

function loadNextImage() {
    if (imgQueue.length > 0) {
        var imgN = new Image();
        imgN.src = imgQueue.shift();
        $(imgN).load(function(){
            $("#main").append(imgN);
            loadNextImage();
        });
    }
}

要更改图片正在加载的顺序，您只需在imgQueue中将它们向前移动，例如，如果我想将图像5移到前面：

imgQueue.unshift(imgQueue.splice(4,1));

这并不完美，例如，除非图像很大，否则将它们分组加载可能更有意义。另外因为loadNextImage操纵队列你无法仅通过原始索引来跟踪图像，所以你需要做一些奇特的事情，比如将它们存储为哈希值，这样你以后就可以找到它们了。

var imgHashQueue = [
   {name: "name", url = "url"},
   ...
]

Answer 2

在这里结合资源： http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/ - http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

之前的SO讨论：Preloading images with jQuery

有没有一种“受控”预加载图像的方法（可能借助jQuery）？

2 个答案: