如何使用 jquery 预加载多个但不是所有幻灯片的图像答案

【问题标题】：how to preload more than one but not all images of a slideshow with jquery如何使用 jquery 预加载多个但不是所有幻灯片的图像
【发布时间】：2010-11-02 17:05:13
【问题描述】：

我想创建一个基于网络的定格视频播放器。基本上是每秒显示 2-4 张图像的幻灯片。每个图像可能最大为 20KB。我不想预加载幻灯片中的所有图像，因为可能有数千张，但是我需要预加载的不仅仅是节目中的下一张图像，因为这不会足够快地播放（因为浏览器需要的播放速度是一次加载多个图像）。

我一直在考虑使用带有 addSlide 类型函数的 jQuery Cycle 插件 (http://malsup.com/jquery/cycle/)，但不知道如何使其工作。

这样的事情可能会奏效吗？ -幻灯片开始 - 回放图像 -preloader 将尝试加载接下来的 60 个图像 -playback 将等待下一个图像完全加载，但不会等待所有其他 59 个图像。

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

【问题讨论】：

您对 MooTools 解决方案感兴趣吗？
绝对！！因为我没有太多的 JavaScript 经验，所以我不依赖任何一个包。
事实上，我什至不知道 JavaScript 是否可以处理这种情况，但我不确定是否有其他方法可以将 JPEG 流式传输到客户端浏览器。
是否有必要使用保活方法，以便不必为每个图像发出 http 请求。我遇到了 digg 一直在研究的“DUI.Stream 和 MXHR”方法，并且对图像加载插件 demos.digg.com/stream/imageDemo.html 印象深刻（在 IE 中不起作用）

标签： javascript jquery slideshow preload

【解决方案1】：

我没有可用的确切代码，但我可以解释框架。我在 jQuery 中做了一些非常相似的事情——尽管我会说它不像 Javascript 那样是 jQuery。这是我所做的基本操作...

创建一个“预加载”图像的函数。在 Javascript 中执行此操作的方法很简单，就是创建一个 Image 元素，例如：

  `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);
    }
  }

这为您提供了框架。

您会希望这与图像的实际显示同步。只要一切顺利，它就可以正常工作。然后你需要决定如果你在加载中落后怎么办……你是丢帧还是放慢幻灯片的速度？我不熟悉实现此策略的插件，但实现起来会很有趣。

【讨论】：

【解决方案2】：

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

要在 js 中进行这项工作，您必须构建一个缓冲对象，该对象可以在预加载图像的数量低于/超过最小阈值时暂停和恢复播放；像 Flash 电影。

【讨论】：

【解决方案3】：

我可以想象这必须是多处理。我正在考虑的是将播放逻辑与图像预加载逻辑分开。它是这样工作的......

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

函数 1 - 显示一个图像，然后启动一个计时器，之后再次调用它以显示下一个图像。每秒 4 张图像，它会每 250 毫秒调用一次。

功能 2 - 启动计时器。在这里，您可以使用“预期值”。例如，您可以预期 15 秒后处理完 60 张图像。因此，7 秒后，您开始加载接下来的 30 或 60 张图像并将它们添加到图像数组中，同时其他函数仍在显示已经存在的图像。

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

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

【讨论】：

【解决方案4】：

您可以创建一个预加载 N 个图像的函数，当加载 N 个图像时，它会再次调用自身，N 是多少？可以是 5 或 10，或者您可以提出一些公式来根据预期的图像尺寸/大小和显示持续时间计算 N
如果所有图像大小几乎相同，则请求加载的第一个图像应先完成加载，因此它不会等待所有 59 个其他图像。
加上一个变量 'loadedN' 保存上次加载图像的索引
当然需要 FireBug 来调试这个应用程序。
播放功能需要检查请求的图片索引是否加载

【讨论】：

能提供预加载N张图片的例子吗？