有没有一种“受控”的图像预加载方式（也许借助jQuery）？

Question

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

1. 幻灯片放映时，将显示第一个图像，并且图像开始按背景2、3、4，...顺序在背景中加载
2. 如果用户决定切换到图像n（可以通过搜索或拇指或...来完成），并且触发的预加载（从1开始）尚未加载n，则顺序（2、3、4，...在1.中建立的）将重新组织为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;

在循环加载的图片仍在加载的其他位置（按imageN拇指）， imageN顺序之前不会加载。

有任何想法吗？

Answer 1

据我所知，没有办法停止或暂停使用javascript加载图像。 但是，控制图像加载顺序的一种好方法是将它们的加载事件链接在一起。 这是一个示例 （使用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和JavaScript

上一则SO讨论： 使用jQuery预加载图像