3

私が取り組んでいるサイトでは、リンクが悪いか古い (または何でも) 可能性があるため、表示される画像が常に (表示される) とは限りません。ここで確認できます:動的 HTML がランダムに配置されているように見えるのはなぜですか?

その場合、画像がある場所に「画像がありません」というメッセージを表示できるようにしたいと考えています。それは可能ですか?その場合、必要なものは次の 2 つです。

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

???

これにより、追加された各画像にそのエラー ハンドラーがアタッチされ、各画像に 1 つずつ、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

...そして、私は理由を知りません...

4

1 に答える 1