I have the following js code,
$(document).on("error", "img", function () {
alert('a')
this.src = ResolveUrl("~/images/tree-item.png");
});
This event is not triggered. I am sure there are lot of broken images
asked Sep 8, 2013 at 12:08
Imran Qadir Baksh - Baloch
34.3k69 gold badges198 silver badges350 bronze badges
3 Answers
The problem is that you can't use event delegation for the error event on the document object, because unlike other events (such as onclick), the onerror event isn't being bubbled to the document object.
Use normal event binding instead:
$('img').on("error", function () {
this.src = ResolveUrl("~/images/tree-item.png");
});
- P.S - This will work only on the images that are already on the DOM when this command is executed.
To handle dynamically added images as well, you need to attach this event to every image you add to the DOM. Here's an example:
function handleError() {
this.src = ResolveUrl("~/images/tree-item.png");
}
// Bind the event to the existing images on the DOM when the document is ready
$(document).ready(function () {
$('img').on("error", handleError);
}
// An example for a function that adds images dynamically
function addImage(imgSource, destination) {
var newImg = $("img").on("error", handleError)
.attr("src", imgSource);
$(destination).append(newImg);
}
1 Comment
Alejandro Rizzo
Attaching the handler should be done before defining the source attribute.
I know, its an old question, but maybe someone is looking for a better solution:
// The function to insert a fallback image
var imgNotFound = function() {
$(this).unbind("error").attr("src", "/path/to/fallback/img.jpg");
};
// Bind image error on document load
$("img").error(imgNotFound);
// Bind image error after ajax complete
$(document).ajaxComplete(function(){
$("img").error(imgNotFound);
});
This code attaches the error-event listener to the img tag on body load and after every ajax call.
1 Comment
Evhz
works great. For newer jquery, use
$('img').on('error', imgNotFound)This can done without jQuery by using event delegation during the capturing phase.
document.addEventListener('error', e => {
// e.target is the element that had the error event
// to check if the element is an img element: if (e.target.matches('img'))
e.target.src = 'default.png';
}, true);
1 Comment
yezzz
Wow, never realised could use capture phase when bubbling is not available. This also works great when appending whole blocks of html to the page containing image tags, eg. when loading content via ajax.
documentusing theerrorevent. This event won't bubble to the document object if I'm not mistaken.