Détection d'une image 404 en Javascript

Question

Après qu'un utilisateur ait téléchargé un fichier, nous devons effectuer un traitement supplémentaire des images, comme le redimensionnement et le téléchargement vers S3. Cela peut prendre jusqu'à 10 secondes supplémentaires. Évidemment, nous faisons cela en arrière-plan. Cependant, nous voulons montrer à l'utilisateur la page de résultats immédiatement et simplement montrer les spinners en place jusqu'à ce que les images arrivent dans leur emplacement permanent sur S3.

Je cherche un moyen de détecter qu'une certaine image n'a pas réussi à se charger correctement (404) dans un autre navigateur. Si cela se produit, nous voulons utiliser JS pour montrer un spinner à sa place et recharger l'image toutes les quelques secondes jusqu'à ce qu'elle puisse être chargée avec succès depuis s3.

Answer 1

Cela a fonctionné pour moi (le mien est en coffeescript). Vous devrez le remplacer par un spinner, bien sûr.

checkImages = ->
  $("img").each ->
    $(this).error ->
      $(this).attr("src", "../default/image.jpg")

$(document).on('page:load', checkImages)

Je suppose que l'équivalent javascript est quelque chose comme

function checkImages() {
  $("img").each(function() {
    $(this).error(function() {
      $(this).attr("src", "../default/image.jpg");
    });
  });
};

$(document).on("page:load", checkImages) ;

Answer 2

Je viens de faire

if ($('#img')[0].naturalWidth > 0) {

comme j'ai remarqué qu'il n'y avait pas de largeur naturelle si l'image était en 404.

Cependant, je peux comprendre que l'on veuille utiliser la méthode ci-dessus.