So behandeln Sie onerror auf html5 Bild

Question

Ich fand diese Frage: jQuery/JavaScript to replace broken images seine funktioniert gut für img-Tag, aber wenn ich versuche, es für Bild-Tag zu verwenden, funktioniert es nicht.

zuerst versuchen Ith Quelle zu fangen fehlgeschlagen:

$('picture source').on('error', function() { 
     loadBackupImage($('picture source').first()); 
    }); 

und der Fehler gefeuert nicht.

Dann versuche ich den Fehler auf dem alternativen img-Tag zu bekommen. , aber ich kann nicht die spezifische Quelle - srcset -Attribut erhalten.

auch, wenn ich die img.src ändern. Es gibt immer noch einen Fehler im Browser. auch so sehe ich das ist die img.src ist richtig.

danke !!

Answer 1

Ich fand den Weg: das Tag Bild gefeuert onerror als img, und die img hat Geschwister - source.

$("img").on('error', function() { 
    $(this).siblings("source").attr("srcset","mybackup.jpg") 
}); 

eine weitere complicatted: Ich habe das differnce Bild für jede Quelle in Attributdaten-Bild gespeichert, und zeigt das richtige Backup-Image

$("img").on('error', function() { 
    var image = $(this).siblings("source").attr("data-image"); 
    $(this).siblings("source").attr("srcset",image); 
}); 

hoffen, dass Sie seine hilfreich finden.