如何確保圖像順序加載

這裏我有一個簡單的測試代碼，它在瀏覽器中加載圖像測試。在我完成加載後，我使用異步onload事件將圖像添加到dom。圖像加載得很好。 問題是如果我不斷重新加載頁面多個時間圖像序列變化。就像圖像-2在圖像-1之前加載，有時圖像-3加載第一等，如何我可以確保圖像加載順序，如第一次加載image1，然後image2，image3等每次我加載頁面。如何我可以做到這一點？如何確保圖像順序加載

var images = ['cat1.png','cat2.jpg','cat3.jpg']; 

var i = 0; 
images.forEach(function(elem,index,arr){ 
    var image=new Image(); 
    image.onload = function(){ 
     document.body.appendChild(image); 
     console.log(++i); 
    }; 
    image.onerror = function(){ 
     console.log('error occured'); 

    } 
    image.src = elem; 
    image.style.width = '300px'; 
    image.style.height = '300px'; 
});

來源

2016-09-15 AL-zami

使用承諾https://developer.mozilla.org/nl/docs/Web/ JavaScript/Reference/Global_Objects/Promise – Roberrrt

但是，foreach是一個同步方法。它應該阻止所有內容，直到第一個圖像加載，不是嗎？ –

@ AL-zami'onload'是一個異步事件，因此'forEach'的回調不會等待圖片下載，它只會開始下載，然後繼續。 – Frxstrem

你應該等待回調從的onload事件。如果它是已解僱您可以迭代並加載下一張圖片。這確保圖像將以正確的順序加載（如數組）。

var images = [ 
    'http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg', 
    'error', 
    'https://s2.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg', 
    'http://www.bharatint.com/img/categories/our-cat-shop-image.png' 
], i = 0; 

function loadImageArrayAsync(){ 
    var image = new Image(); 
    image.onload = function(){ 
     document.body.appendChild(image); 
     if (i++ < images.length - 1) loadImageArrayAsync(); 
    }; 
    image.onerror = function(){ 
     if (i++ < images.length - 1) loadImageArrayAsync(); 
    } 
    image.src = images[i]; 
    image.style.height = '300px'; 
    image.style.width = '300px'; 
} 

loadImageArrayAsync();

來源

2016-09-15 08:25:31 Maurize

但是如果一個圖像加載失敗會發生什麼..這意味着其他圖像不能加載太 –

更新到甚至工作如果加載失敗。 – Maurize

這是另一種方法。它在一個循環中觸發所有的圖像請求，然後當接收到響應時，它會執行一些處理來確定可以顯示哪些圖像。通過這種方式，您無需等待一張圖像在請求下一張圖像之前完成加載。該代碼可能會做整理，但你的想法...

 var urls = ["/Content/images/Chrysanthemum.jpg", "/Content/images/Desert.jpg", "/Content/images/Hydwewrangeas.jpg", "/Content/images/Jellyfish.jpg", "/Content/images/Koala.jpg"] 
    var numImages = urls.length; 
    var images = [numImages]; 
    var gotResponse = [numImages]; 
    var maxDisplayed = -1; 

    function checkImages(index) { 
     // Check if previous images have been displayed 
     if (maxDisplayed == index - 1) { 
      for (i = index; i <= numImages; i++) { 
       // Check if we've received a response for this image 
       if (gotResponse[i] !== true) { 
        break; 
       } 
       maxDisplayed = i; 
       if (images[i] != null) { 
        console.log('Adding image ' + i); 
        document.body.appendChild(images[i]); 
       } 
      } 
     } 
    } 

    function imageError(index) { 
     console.log('Error loading image ' + index); 
     images[index] = null; 
     gotResponse[index] = true; 
     checkImages(index); 
    } 

    function imageLoaded(index, image) { 
     console.log('Loaded image ' + index); 
     images[index] = image; 
     gotResponse[index] = true; 
     checkImages(index); 
    } 

    function loadImages() { 
     $.each(urls, function(index, value) { 
      var image = new Image(); 
      image.onload = function() { 
       imageLoaded(index, image); 
      } 
      image.onerror = function() { 
       imageError(index); 
      } 
      image.src = value; 
      image.style.width = '300px'; 
      image.style.height = '300px'; 
     }); 
    } 

    loadImages();

輸出示例：

Error loading image 2 
Loaded image 3 
Loaded image 0 
Adding image 0 
Loaded image 1 
Adding image 1 
Adding image 3 
Loaded image 4 
Adding image 4

來源

2016-09-16 08:30:08

如何確保圖像順序加載

回答

相關問題