Quelle est la meilleure façon de gérer les images cassées?

Question

Il semble donc y avoir quelques façons de gérer les images brisées sur une page html. Je voudrais savoir quels sont les moyens d'utilisation courante et quels sont les moyens considérés comme les meilleures pratiques?

Pour commencer, je l'ai regardé un peu comme moi-même:

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" /> 

Avantages: fonctionne à chaque fois, l'événement sera toujours pris. L'utilisateur ne voit jamais d'image brisée. Semble bien fonctionner à travers les navigateurs. Inconvénients: tag onerror nécessaire sur chaque image, la fonction imgErr (source) doit être dans la tête pour attraper les erreurs, ralentit les utilisateurs expérimentés temps de chargement

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
}); 

Plus: très peu de code, fonctionne sur toutes les images sans changer leur balisage, peut être placé en dehors de la tête Inconvénients: peut manquer l'événement d'erreur en fonction de la vitesse des pages d'événements onload, ralentit les utilisateurs expérimentés temps de chargement

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
}); 

Avantages: peut être placé n'importe où sur la page, va réparer les images peu importe quand il arrive à courir, ne ralentit pas l'utilisateur s temps de chargement expérimenté Les inconvénients: montre une image brisée jusqu'à ce qu'il crée une mauvaise expérience utilisateur

Dans mon cas, le temps de chargement est le plus grand problème, mais je ne peux pas obtenir la dernière option pour travailler correctement dans IE car il change cassé et aucune image cassée pareillement!

Cheers, Denis

Answer 1

Une pensée qui ne viennent à l'esprit est de créer un gestionnaire d'image sur votre serveur web, à savoir

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" /> 

Ignorer le ASPX, ce serait évidemment remplacé par ce qui votre technologie de script de serveur préférée était. Ce gestionnaire peut alors traiter les noms d'image qui ne sont pas présents en délivrant votre missing.jpg pour tous les noms d'image inconnus.

À part cela, vous êtes bloqué avec les options que vous donnez à ce que je peux voir. Tout javascript qui s'exécute avant le chargement de la page risque de ne pas itérer les balises img non encore reçues et tout script qui attend la mise en page risque de voir l'utilisateur voir des images cassées.

Rock-> Vous < -Hardplace

Answer 2

À mon avis, en utilisant la balise alt suffit et il n'y a pas besoin d'ajouter de la complexité à la page en vérifiant chaque fois en utilisant javascript.

Bien sûr, vous devez vérifier de temps en temps que vous n'avez pas d'image cassée. There are tools to do it.

Answer 3

Idéalement, l'étiquette alt doit simplement être utilisée. Si cela est vital, la solution javascript n'est vraiment pas idéale car elle ne fonctionnera pas si JS est désactivé. Vous pouvez cependant faire une sorte de solution côté serveur. Quelque chose dans php pourrait être fait comme ceci mais exigerait une base de données ou une sorte de manière de placer des variables.

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>