0

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

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

有任何想法吗？

4

2 回答 2

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"},
   ...
]
于 2011-08-09T14:24:59.380 回答
0

这里有几个资源：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 预加载图像

于 2011-08-09T13:35:12.403 回答