有没有办法“控制”预加载图像（也许在 jQuery 的帮助下）？

Question

对于某种幻灯片，我正在尝试实现一个巧妙的图像预加载器，其工作原理如下：

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

2. 的其他可能性可能是暂停预加载，加载图像 n，然后继续预加载，但我更喜欢第一个想法，因为这将为您提供更复杂的重新排序的自由，例如 (n, n+1, n+ 2，...，最后，第一个未加载，第二个未加载，...）。

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

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），imageN 在循环中的顺序轮到之前不会被加载。

有什么想法吗？

Answer 1

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

在示例中，我有一个用作队列的数组 imgQueue 和一个函数 loadNextImage，该函数从队列中抓取图像进行加载并调用 loadNextImage code> 当图像加载完成时。

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 讨论：预加载图像使用 jQuery