2

画像の名前は知っているが、正確な拡張子がわからない状況にいます。拡張子は .jpg または .png です。さらに、画像自体が存在しない場合もあります。したがって、次のことを実行する必要があります。

  1. image.jpg を読み込もうとしています
  2. エラーが発生した場合、image.png をロードしてみてください
  3. エラー時、notfound.jpg を表示

私は次のコードを書きました：

<img src=image.jpg onerror="this.onerror=null; this.src=image.png;">

しかし、「this.onerror=null」は、onerror が無限ループに入るのを止めるだけです。onerror が再度トリガーされたときに、代替画像「notfound.jpg」の代替画像をロードするにはどうすればよいですか?

4

2 に答える 2

1

ここに、jquery を使用して行うことを示します。できるかどうか尋ねましたが、あなたは返事をしませんでした。

それで、ここにあります。

標準の html は次のようになります。

<img src=image.jpg alt="" />

ここに jquery が添付されます。

$('img').on('error', function () {
    var $this = $(this);
    // ajax with type 'HEAD' checks to see if the file exists
    $.ajax({
        url: 'image.png', //place alternate img link here
        type: 'HEAD',
        success: function () {
            //if success place alternate image url into image
            $this.prop('src', 'image.png');
        },
        error: function () {
            //if error place notfound image url into image
            $this.prop('src', 'notfound.jpg');
        }
    });
});

ここでは、別の環境で動作していますが、最終製品を示しています: http://jsfiddle.net/6nFdr/

于 2013-06-01T19:18:40.487 に答える
0

画像 src を設定した後、onerror で false を返します。

例：

<img src="fake.png" onerror="this.src='http://www.gravatar.com/avatar/9950cb3a6bdc0e10b1260135bd145e77?s=32&d=identicon&r=PG'; return false;">

デモ: http://jsfiddle.net/rlemon/SKtVg/

インラインJavaScriptは避けるべきです。それが間違っているわけではなく、あまり望まれていないだけです。インライン js を使用しなかった場合は、onerror で小さな関数を実行して他の画像をチェックし、読み込まれなかった場合は存在することがわかっている画像を表示することができます。

于 2013-06-01T18:17:36.280 に答える