在我所工作的网站中,由于链接可能是坏掉或过期(或其他原因),图像并不总是显示。您可以在此处查看:为什么我的动态HTML似乎随机放置?
当出现这种情况时,我希望能够在应该显示图像的位置上显示“无法显示图像”的消息。是否有可能实现这一点?如果可以,需要两个步骤:
也许可以使用类似于伪代码的方式表示(以下为示例):
1) To be able to determine programmatically that the image is not being displayed
2) To replace it, in that case, with aforementioned message
也许可以使用类似于伪代码的方式表示(以下为示例):
if (ImageMissing) {
$('img').Attr('src', 'imageMissing.png');
}
更新
好的,代码应该是这样的:
function doSomething() {
var htmlBuilder = '';
$.getJSON('duckbills.json', function() {
// each ...
// process the json file, building dynamic html
htmlBuilder += 'img="bla.png"...';
$('img').error(function() {
$(this).attr("src", "imageMissing.png");
});
}):
}):
这会导致每个添加的图片都附加了该错误处理程序,因此有N个事件处理程序绑定,每个图片一个?
还是应该这样:
function doSomething() {
var htmlBuilder = '';
$.getJSON('duckbills.json', function() {
// each ...
// process the json file, building dynamic html
htmlBuilder += 'img="bla.png"...';
}):
$('img').error(function() {
$(this).attr("src", "imageMissing.png");
});
}):
更新2
这是我的代码,但它无法工作:
$.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
...and I don't know why...