如何確保圖像以正確的順序循環加載

-1

我正在從遠程服務器加載圖像。我如何確保所有圖像都以正確的順序加載如何確保圖像以正確的順序循環加載

還我如何確保只有當所有的圖像加載

下面的代碼不加載正確的順序圖像警報被調用，在圖像加載之前調用警報。

$(window).load(function() { 
    $('.fancybox').each(function() { 
    var hh = $(this).attr('href'); 
    var img = new Image(); 
    img.src = hh; 

    function TIMG(i) { 
     if (img.complete != null && img.complete == true) { 
     $('.mag').append('<img src="' + hh + '" class="cls" />'); 
     } else { 
     setTimeout(TIMG, 1000); 
     } 
    } 

    setTimeout(TIMG, 1000);  
    }); 

    alert(hi); 
});

來源

2012-09-30 skcrpk

您是否嘗試每秒添加一張圖片（如果可用）或者您是否嘗試在圖片可用時追加圖片，但按照正確的順序？ – jfriend00

我試圖追加它們，只要它們可用但按正確順序 – skcrpk

爲什麼你花7個小時回答澄清問題。如果你發佈了一個問題，然後在我們對你想要的問題有疑問的7個小時內消失，那麼這會浪費很多人的時間，並大大降低你獲得有用答案的可能性。你應該明白，> 90％的問題觀衆將在第一個小時左右。如果您在那段時間內沒有提出澄清問題的建議，那麼您放棄了獲得多人響應的大部分機會，而我們這些做出響應的人只會對您感到沮喪。 – jfriend00

由於下載圖像時瀏覽器通常不會阻止，只有這樣才能保證圖像在正確的順序裝載將連續加載它們...使用隊列，然後纔開始下一個後前一個已經完成。這絕對不是推薦的，但因爲這很容易造成嚴重的性能下降。

等待所有圖像加載時，最好由.promise()和jQuery中的相關方法完成：http://api.jquery.com/promise/，並觀察圖像是否爲load() ed。如果你特別想控制圖像的顯示（這更可能是你所關心的），那麼它們可以在加載後依次顯示。

來源

2012-09-30 21:06:21

此基礎上，你只是想盡快爲他們準備好加入他們爲了新的信息，你可以做這樣的

$(document).ready(function() { 
     // preload all the images as fast as possible 
     var imgs = []; 
     $('.fancybox').each(function() { 
      // get all images preloading immediately 
      // so there is the best chance they are available when needed 
      var img = new Image(); 
      imgs.push(img); 
      img.onload = function() { 
       addReadyImages(); 
      } 
      img.className = "cls"; 
      img.src = $(this).attr('href'); 
     }); 

     function addReadyImages() { 
      // show all images that are ready up to here 
      while (imgs.length && imgs[0].complete === true) { 
       // append the loaded image from the start of the array 
       $('.mag').first().append(imgs[0]); 
       // remove the one we just did from the start of the array 
       imgs.shift(); 
      } 
     } 
});

工作演示：http://jsfiddle.net/jfriend00/sCHws/

該算法的工作原理如下：

開始預加載所有的圖像儘快。該.fancybox項目在你的頁面中遇到的順序數組
存儲圖像對象
設置一個onload事件處理程序爲每個圖像，所以我們立刻知道當它準備
在任何圖像的onload處理，追加準備好陣列前面的所有圖像，然後將它們從陣列中移除

PS我認爲只有一個.mag項目，因此我們不需要製作圖像對象的單獨副本（效率更高 - 而不是創建新的圖像對象）。如果情況並非如此，那麼請透露您的HTML，以便我們可以看到整個問題。

來源

2012-09-30 21:28:08 jfriend00

好，但它沒有按正確的順序加載 – skcrpk

@skcrpk - 它的加載順序是遇到'.fancybox'項。我也重寫了代碼，儘快顯示它們，而不使用定時器。 – jfriend00

我測試了代碼，但它沒有按照正確的順序加載圖像，我希望圖像按照循環遇到的相同順序加載，就像.fancybox中的第一個圖像應該被附加到.mag，然後第二等等 – skcrpk

如何確保圖像以正確的順序循環加載

回答

相關問題