Search jQuery

jQuery Forum

How can I get the img error handler to work?

in Using jQuery • 10 years ago

It was suggested (here: http://stackoverflow.com/questions/17702123/is-there-a-way-to-programmatically-determine-that-an-image-link-is-bad) that I add the "$('img').error(function () {" code to deal with images which did not load by replacing it with a "no image available" image. However, it doesn't work. Why not? Is it in the wrong place? Is the code wrong? Or...???

$.getJSON('Content/NBCCJr.json', function (data) {
$.each(data, function (i, dataPoint) {
if (IsYear(dataPoint.category)) {
htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
} else {
htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
dataPoint.imgsrc + '\"' +
dataPoint.imgalt + '></img></a>' +
'<div id=\"prizeCategory\" class=\"category\">' +
dataPoint.category +
'</div><br/><cite id=\"prizeTitle\" >' +
dataPoint.title +
'</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
dataPoint.author +
'</div><br/>';
if (dataPoint.kindle.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
' target=\"_blank\">Kindle</a></button>';
}
if (dataPoint.hardbound.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
' target=\"_blank\">Hardbound</a></button>';
}
if (dataPoint.paperback.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
' target=\"_blank\">Paperback</a></button>';
}
htmlBuilder += '</section>';

// Doesn't work
$('img').error(function () {
$(this).attr("src", "Content/NoImageAvailable.png");
});
}
}); //each

Replies(10)

jakecigar

Re: How can I get the img error handler to work?

10 years ago

$('img').error(function () {
$(this).attr("src", "Content/NoImageAvailable.png");
});

is wrong.

After you append your new markup, you can find the images and fix them.

as in

$('body').append(htmlBuilder) // or wherever you want it
.find('img').error(function(){
this.src= "Content/NoImageAvailable.png"
})

JΛ̊KE

bclayshan..

Re: How can I get the img error handler to work?

10 years ago

I altered my code to this:

$('#BooksContent').append(htmlBuilder)
.find('img').error(function() {
this.src = "Content/NoImageAvailable.png"
});

...but it still doesn't work. I don't know if it matters, but this code is not in the "ready" function - it is in a function called by the ready function: function getNatlBookCritics() {

jakecigar

Re: How can I get the img error handler to work?

10 years ago

Can you share a link to the page, so I can see it misbehaving?

JΛ̊KE

bclayshan..

Re: Re: How can I get the img error handler to work?

10 years ago

The site is not live yet.

bclayshan..

Re: Re: How can I get the img error handler to work?

10 years ago

Since the site is not live, I can't point you to that, but the code, in a nutshell, is:

function getNatlBookCritics() {
var htmlBuilder = '';

$.getJSON('Content/NBCCJr.json', function (data) {
$.each(data, function (i, dataPoint) {
if (IsYear(dataPoint.category)) {
htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
} else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children's books) to change height and width of img
htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
dataPoint.imgsrc + '\"' +
dataPoint.imgalt + '></img></a>' +
'<div id=\"prizeCategory\" class=\"category\">' +
// etc.
htmlBuilder += '</section>';

//// Doesn't work
//$('img').error(function () {
// $(this).attr("src", "Content/NoImageAvailable.png");
//});
}
}); //each
$('#BooksContent').append(htmlBuilder)
.find('img').error(function() {
this.src = "Content/NoImageAvailable.png"
});
$('#BooksContent').css('background-color', 'black');
$('button').button();
}); //getJSONNBCCJr
$largest = 0;
$(".wrapper").each(function () {
if ($(this).height() > $largest) {
$largest = $(this).height();
}
});
$(".wrapper").css("height", $largest);
} // getNatlBookCritics()

jakecigar

Re: How can I get the img error handler to work?

10 years ago

See it work with this code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$('body').append('<img src="missing.photo.jpg">')
.find('img').error(function(){
this.src= "http://www.gravatar.com/avatar/317f4b62da2b0186feac9b6209793505?s=80&d=http%3A%2F%2Fimg.zohostatic.com%2Fdiscussions%2Fv1%2Fimages%2FdefaultPhoto.png"
})
})
</script>
<style>
</style>
</head>
<body>
</body>
</html>