如何确保图像顺序加载

这里我有一个简单的测试代码，它在浏览器中加载图像测试。在我完成加载后，我使用异步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

如何确保图像顺序加载

回答

相关问题