如何使用jQuery预加载幻灯片中多张图片而不是全部图片

Question

我想创建一个基于Web的逐帧动画播放器。基本上是一个幻灯片，每秒显示2-4张图片。每个图像可能最大为20KB。我不想预加载幻灯片中的所有图像，因为可能有成千上万个，但是我需要预加载比幻灯片中的下一张图像更多的图像，因为这样才能快速回放（由于回放速度，浏览器需要同时加载多个图像）。

我一直在研究使用jQuery Cycle插件（http://malsup.com/jquery/cycle/）和addSlide类型函数，但不知道如何使其工作。

类似这样的东西会起作用吗？ - 幻灯片开始 - 图像被回放 - 预加载器将尝试加载多达下一个60个图像 - 回放将等待行中的下一个图像完全加载，但不会等待其他59个图像全部加载。

对于此应用程序，回放/预加载顺序很重要。

- wtip

---

你对 MooTools 解决方案感兴趣吗？ - Ryan Florence

当然！我不会被任何一个包所束缚，因为我没有太多的JavaScript经验。 - wtip

事实上，我甚至不知道JavaScript是否能处理这种类型的情况，但我不确定是否有其他方法将JPEG流式传输到客户端浏览器。 - wtip

需要使用保持连接的方法来避免为每个图像发出http请求吗？我发现了DUI.Stream和MXHR这两种方法，这是digg一直在研究的，并对其图像加载插件http://demos.digg.com/stream/imageDemo.html印象深刻（在IE中无法使用）。 - wtip

Answer 1

我没有可用的精确代码，但我可以解释框架。我已经在jQuery中做过非常类似的事情，尽管我会说它不是那么多的jQuery而是Javascript。这是我所做的基础...

创建一个“预加载”图像的函数。在Javascript中完成此操作的方法只需创建一个图像元素即可，例如：

  `function preloadAnImage(src) {
    var i = new Image(1020, 492);
    i.src = src;
  }`

创建一个图像列表，例如：imagesToPreloadIndex = ['image1.jpg'，'image2.jpg'...]； 创建一个基于此队列工作的函数，例如：

function preloadNextImage() {
    preloadAnImage(imagesToPreload.pop());   
    if (imagesToPreloadIndex.length > 0) {
      setTimeout(preloadNextImage, 300);
    }
  }

这为你提供了框架。

你需要将它与实际的图像显示同步。只要一切顺利，这样做就没问题。但是如果加载速度跟不上怎么办？你会丢掉一帧还是减慢幻灯片播放速度？我不熟悉实现这种策略的插件，但实现起来应该很有趣。

- ndp

Answer 2

• 您可以创建一个函数，预加载N张图片，当N张图片加载完毕时，它会再次调用自身。N的值可以是5或10，或者您可以根据预期图像尺寸/大小和显示时间持续时间来计算N的公式。
• 如果所有图像的大小几乎相同，则请求加载的第一张图像应该先完成加载，这样它就不必等待其他59张图像全部加载完毕。
• 还有一个变量'loadedN'，它保存了最后一张加载的图像的索引。
• 调试此应用程序需要使用FireBug。
• 回放功能需要检查所请求的图像索引是否已加载。

- Mike More

---

你能提供一个预加载N张图片的例子吗？ - wtip

Answer 3

我能想象这必须是多进程。我正在考虑将播放逻辑与图像预加载逻辑分开。它的工作原理如下...

您启动一个初始化器。一旦预加载了N张图片（此时可以显示可怕的“缓冲”屏幕），则调用2个函数。

第1个函数-显示图像，然后启动计时器，在计时器结束后再次调用以显示下一张图像。每秒4张图像，则每250毫秒调用自己一次。

第2个函数-启动计时器。在这里，您可以使用“期望值”进行操作。例如，可以预期在15秒后处理完60张图像。因此，在7秒后，您开始加载下一个30或60张图像，并将其添加到图像数组中，同时另一个函数仍在显示已经存在的图像。

当然，您需要在函数1上设置限制器，以便在第N-1个元素停止播放，以避免堆栈溢出或I / O错误。

不知道这是否有用，但这就是我理解这个问题的方式。

- Mike

Answer 4

听起来有问题，因为您永远无法控制客户端获取图像的速度。使用视频可能会更容易且更令人满意。

要使此功能在js中工作，您必须构建一个缓冲对象，该对象可以在预加载的图像计数低于/高于最小阈值时暂停和恢复播放; 就像Flash电影一样。

- John Mee