1

私のユースケースでは、画像を Web サイトに公開する必要があります。ただし、画像は一定期間制限される場合があります。その間、壊れた画像を表示するためのベスト プラクティスは何ですか?

これまでの私のアプローチ：

  • ここで<img>述べたように、タグの onerror および onload ハンドラを使用します
  • placehold.itを使用して、破損したすべての画像をプレースホールドします

これに関するガイドライン/意見/ベストプラクティスに非常に感謝します。<img>また、要素のイベントを処理するオプションがないレガシー システムを適切にフォールバックするにはどうすればよいですか。画像にはすでにALT属性があるため、これらの行のガイドラインはスキップできます。

4

1 に答える 1

2

これにタグを付けたjQueryので、それはオプションだと思います。

実際、最も簡単な解決策は、エラーを検出し、その場合に画像を置き換えることです。

$('img.myChangingImageClass').error(function(){
        $(this).attr('src', 'notavailableYet.png');
});

シンプルでわかりやすく、最新のすべてのブラウザーで動作します。

Matt は、後で画像を追加する可能性がある場合に便利なイベント委任を使用することを提案しました。また、画像ごとのイベントではなく、ページ全体に対して 1 つのイベントを添付します。これは、次の方法で行うことができます。

$(document).on('error', 'img.myChangingImageClass', function () {
    $(this).attr('src', 'notavailableYet.png'); 
});

画像を表示できないシステムや SEO に適した 'alt' 属性が既にあるためです。必要に応じて代替画像に使用できますがplacehold.it、それは必要ないと思います (ユースケースによって異なります)。.hide()画像を加工したり、それで遊んだりすることもできます。

于 2013-03-31T13:08:23.800 に答える