如何使用jQuery預加載幻燈片的多個圖像，但不是全部圖像

Question

我想創建一個基於網絡的定格視頻播放器。 基本上是每秒顯示2-4張圖像的幻燈片。 每個圖像最大為20KB。 我不想預載幻燈片中的所有圖像，因為可能有數千張圖像，但是我需要預載節目中的下一張圖像，而不僅僅是下一張圖像，因為這樣回放的速度不夠快（由於瀏覽器的回放速度需要提高一次加載多個圖片）。

我一直在研究將jQuery Cycle Plugin（ http://malsup.com/jquery/cycle/ ）與addSlide類型函數一起使用，但不知道如何使其工作。

這樣的事情可能行得通嗎？ -Slideshow開始-回放圖像-預加載器將嘗試加載最多60張圖像-回放將等待行中的下一幅圖像完全加載，但不會等待其他59張圖像。

播放/預加載順序對於此應用程序很重要。

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

這樣就為您提供了框架。

您需要將其與圖像的實際顯示同步。 只要一切順利，此方法就可以正常工作。 然后，您需要確定如果在加載過程中落后了該怎么辦...是放幀還是放慢幻燈片的播放速度？ 我不熟悉實現此策略的插件，但是實現起來會很有趣。

Answer 2

• 您可以創建一個預加載N張圖像的函數，當加載N張圖像時，它會再次調用自身，N是多少？ 可以是5或10，或者您可以根據預期的圖像尺寸/大小和顯示時間得出一些公式來計算N
• 如果所有圖像的大小幾乎相同，則請求加載的第一個圖像應先完成加載，因此它不會等待所有59個其他圖像。
• 加上一個變量“ loadedN”，該變量保存最近加載的圖像的索引
• 當然需要FireBug來調試此應用程序。
• 播放功能需要檢查請求的圖像索引是否已加載

Answer 3

我可以想象這必須是多處理的。 我在想的是將回放邏輯與圖像預加載邏輯分開。 它是這樣的...

您啟動一個初始化程序。 一旦預加載了N張圖片（此時您可以顯示可怕的“緩沖”屏幕），就可以調用2個功能。

功能1-顯示圖像，然后啟動計時器，然后再次調用它以顯示下一張圖像。 每秒有4張圖像，它每250ms就會調用一次。

功能2-啟動計時器。 在這里，您可以使用“期望值”。 您可以預期，例如15秒后將處理60張圖像。 因此，在7秒鍾后，您將開始加載接下來的30或60張圖像，並將其添加到圖像陣列中，而其他功能仍將顯示已經存在的圖像。

當然，您需要在功能1上使用一個限制器，該限制器會在Nth-1元素處停止播放，以避免堆棧溢出或I / O錯誤。

不知道這是否有用，但這是我對問題的理解。

Answer 4

聽起來有問題，因為您將永遠無法控制客戶端獲得圖像的速度。 使用視頻可能會更簡單，更令人滿意。

要在js中實現此功能，您必須構建一個緩沖對象，每當預加載的圖像計數低於/超過最小閾值時，該緩沖對象都可以暫停並繼續播放； 像Flash電影一樣。