7

次のようなアンカータグがあります。

<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.duckbill.com/PlatypiOnVacation.jpg\" alt=\"Platypi playing Pinochle and eating Pizza in Panama\" /></a>

...src イメージの読み込みに失敗することがあります。そのような場合、十分な遅延（数秒）の後、それを次のように置き換えたいと思います：

<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"Content/Images/PlatypiOnVacation.jpg\" alt=\"Platypi playing Pinochle and eating Pizza in Panama\" /></a>

おそらくjQueryでそれを行うことができることはわかっていますが、リモートファイルがロードされなかったことをプログラムで判断するにはどうすればよいでしょうか?そのような場合は、フォールバックイメージを使用して応答しますか?

アップデート

本当に利用できない画像に対するBrad Christieの回答が好きですが、「利用できない」ことを決して表示したくありません。現時点でリモートの画像が利用できない場合は、ローカルの画像を使用してください。私はこれが好きです: http://www.cirkuit.net/projects/jquery/onImagesLoad/example1.htmlしかし、画像が失敗したことをプログラムで判断する方法は?

4

3 に答える 3

16 
<img src="http://remotecdn.com/myimage.jpg"
     data-failover="/assets/notfound.jpg" />

それで：

<script>
  $('img[data-failover]').error(function(){
    var failover = $(this).data('failover');
    if (this.src != failover){
      this.src = failover;
    }
  });
</script>

実際のソースを読み込もうとしますが、エラーが発生した場合はfailoverdata プロパティを使用してローカル リソースに変換します。補足情報を分離しているため、サポートできない/サポートしないブラウザーでは適切に失敗するはずです。

についての詳細情報.error()。

于 2013-08-23T16:03:08.893 に答える
1

私が見つけた問題は、画像リクエストがかなり長い間ハングすることがあるということです。それが発生したときにユーザーに何かを表示したい場合は、img 要素に「利用できない」アイコンなどを使用して CSS の背景を設定できます。その後、画像が最終的に読み込まれた場合でも表示されます。

setTimeout(function(){
    $(".thumb").each(function(){
        if(!this.complete){
            $(this).css({background:'url("not-available.gif")'});
        }
    });
}, 5000);
于 2013-08-23T16:28:40.370 に答える