Vérifiez si des séries d'images existent, arrêtez quand elles ne sont pas trouvées en Javascript

Question

Je voudrais montrer des séries d'images dynamiquement chargées nommées de manière structurée dans mon site Web. Les images sont situées dans un domaine différent, ce qui entraîne une restriction Same Origin Policy. Je ne peux pas utiliser $.ajax.

Je bâtirai mon URL comme avec un compteur tel que www.example.com/Images/img-1.jpg, www.example.com/Images/img-2.jpg et il va ...

J'ai essayé plusieurs autres réponses de messages similaires, mais ne pouvait pas les faire fonctionner. Soit la boucle s'exécute pour toujours, soit elle ne trouve jamais les images même si elles existent dans le chemin.

1er essai:

ShowImages: function() { 
    var urlBase = 'http://www.example.com/Images/img-'; 
    var i = 1; 

    while (true) { 
     var url = urlBase + i + '.jpg';  

     var imgDom = new Image(); 
     imgDom.onload = function() { 
      alert('worked'); 
      i++; 
     }; 
     imgDom.onerror = function() { 
      return; // I want to either break the while loop, or return from ShowImages function 
     }; 
     imgDom.src = url; 
    } 
}, 

Il frappe jamais .onerror.

2ème essai:

ShowImages: function() { 
    var urlBase = 'http://www.example.com/Images/img-'; 
    var i = 1; 

    while (true) { 
     var url = urlBase + i + '.jpg';  

     var imgDom = document.createElement("img"); 
     $(imgDom).attr('src', url); 

     if (imgDom.complete) { 
      alert('worked'); 
      i++; 
     } else { 
      break; 
     } 
    } 
}, 

Il frappe jamais .complete.

Answer 1

Essayer avec votre première option (vous avez besoin essentiellement à enchaîner)

ShowImages(1); 
ShowImages: function (counter) { 
    var urlBase = 'http://www.example.com/Images/img-'; 

     var url = urlBase + counter + '.jpg';  

     var imgDom = new Image(); 
     imgDom.onload = function() { 
      alert('worked'); 
      ShowImages(counter+1); 
     }; 
     imgDom.onerror = function() { 
      alert("all images done.."); 
      return; // I want to either break the while loop, or return from ShowImages function 
     }; 
     imgDom.src = url; 
};