Was ist der optimale Weg, um beschädigte Bilder zu bearbeiten?

Question

So scheint es einige Möglichkeiten zu geben, mit zerbrochenen Bildern auf einer HTML-Seite umzugehen. Ich würde gerne wissen, welche Wege in der Öffentlichkeit genutzt werden und welche Methoden als Best Practice angesehen werden.

starten ich einige mich gerne haben gesucht:

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

Pros

: funktioniert jedes Mal, die Veranstaltung wird immer gefangen. Der Benutzer sieht niemals ein defektes Bild. Scheint gut über die Browser zu funktionieren. Nachteile: onerror Tag auf jedes Bild erforderlich, Funktion imgErr (Quelle) muss im Kopf sein, um die Fehler zu fangen, verlangsamt sich die Benutzer die Ladezeit

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

Pros erlebt: sehr wenig Code, auf alle Bilder funktioniert ohne ihre Markup zu ändern, können Cons außerhalb des Kopfes vorhanden sein: die Fehlerereignis in Abhängigkeit von der Geschwindigkeit der Seiten onload Ereignis verpassen, verlangsamt sich die Benutzer erfahren Ladezeit

$(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"); 
     } 
    }); 
}); 

Pro: überall werden platziert auf der Seite, wird die Bilder reparieren, egal wann es ausgeführt wird, verlangsamt den Benutzer nicht s erfahrene Ladezeit Nachteile: zeigt ein gebrochenes Bild, bis es läuft erstellen eine schlechte Benutzererfahrung

In meiner Situation Ladezeit ist das größte Problem, aber ich kann nicht die letzte Option in IE richtig arbeiten, wie es gebrochen funktioniert und keine gebrochenen Bilder!

Cheers, Denis

Answer 1

Ein Gedanke in den Sinn nicht Frühling ist ein Bild-Handler auf Ihrem Webserver zu erstellen, das heißt

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

die aspx ignorieren, offensichtlich würde es mit dem, was ersetzt werden Ihre bevorzugte Server-Scripting-Technologie war. Dieser Handler kann dann mit Bildnamen umgehen, die nicht vorhanden sind, indem er missing.jpg für alle unbekannten Bildnamen liefert.

Abgesehen davon sind Sie mit den Optionen fest, die Sie geben, soweit ich sehen kann. Jedes JavaScript, das vor dem Laden der Seite ausgeführt wird, birgt das Risiko, dass nicht über noch nicht erhaltene Img-Tags iteriert wird, und jedes Skript, das auf die Seitenbereitstellung wartet, riskiert, dass der Benutzer fehlerhafte Bilder sieht.

Rock-> Sie < -Hardplace

Answer 2

Meiner Meinung nach, mit dem alt Tag genug ist, und es gibt keine Notwendigkeit, sie durch Überprüfung jedes Mal mit Hilfe von Javascript Komplexität der Seite hinzuzufügen.

Natürlich müssen Sie ab und zu überprüfen, ob Sie ein defektes Bild haben. There are tools to do it.

Answer 3

Im Idealfall sollte nur das alt-Tag verwendet werden. Wenn dies wichtig ist, ist die JavaScript-Lösung wirklich nicht ideal, weil sie nicht funktioniert, wenn JS ausgeschaltet ist. Sie könnten jedoch eine serverseitige Lösung erstellen. Etwas in PHP könnte so gemacht werden, aber würde eine Datenbank oder eine Art der Einstellung von Variablen erfordern.

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