<img>タグのHTTPステータスコードを取得する方法

私は、ユーザーの操作に応じてサーバーサイドで生成されるたくさんの画像を持つページを持っています。イメージが正常に読み込まれると、私は満足していますが、サーバーにエラーが発生した場合、エラーが発生したことに応じて動作する必要があります。

例えば:

  • 500コード:これを行う
  • 503コード:そのようなことをする

等々。

So, my question: is there any way to get status code within "img" tag on-error event handler?

9
なぜあなたはクライアントでこのような問題を扱うのでしょうか?なぜサーバーはこれらのイメージを適切に扱うのですか?
追加された 著者 Raynos,
いいえ、まだ間違っています。あなたはHTTPサーバを持っています。画像の受信GET要求を受け取ったら、準備ができているのを待つことができます。重大なエラーが発生した場合は、「重大なエラー」イメージを返すことができます。
追加された 著者 Raynos,
@ Raynos残念ながら、私はフロントエンドだけで作業しており、バックエンドにアクセスすることはできません。私は問題の条件に満足していません。私が知っている限り、サーバーはオープンな接続をたくさん用意する余裕がないので、画像の準備ができているかどうかを尋ねるだけで、画像を準備するのを待つことはできません。
追加された 著者 Artem Pyanykh,
@ Raynosのような状況は、画像がサーバー上でダイナミックに作成されますが、時間がかかります。これは、ブラウザが画像を要求したときに画像の一部が表示されないことを意味します。同時に、サーバー側で重大なエラーが発生する可能性があり、画像がまったく表示されません。だから、httpステータスに基づいて、私はもう一度イメージのためにサーバーに尋ねるか、エラーについてユーザーに通知しなければならない。
追加された 著者 Artem Pyanykh,

4 答え

いいえ、JavaScriptの img タグによるリクエストからHTTPステータスを取得する方法はありません。

Firefoxのプラグイン、クロム/サファリの拡張機能を使ってこれを書くことができます。

代わりにAJAXを使用してイメージを読み込みます( img タグを使用しない)。 AjaxリクエストからHTTPステータスコードを取得できます。

9
追加された
場合によってはAjaxは良い代替物ではありません。あなたの望むイメージは外部ドメインに置かれます。 2016年にこの問題について何か新しいことがありますか?
追加された 著者 Fusion,
データURLとして送信する必要があります。おそらく、サーバー側でデータURLを生成できる何らかの種類のライブラリを見つける必要があります。その後、それらが到着すると、imgのsrcをデータURLに設定するだけです。これにより、イメージの読み込みにかなりのオーバーヘッドが追加されます。本当の解決策はおそらくサーバーが常に正常に画像を送信するように修正することです。
追加された 著者 Matt Greer,
プラグインは受け入れられません。 AJAXはうまくいくようですが、AJAXをどのようなデータで取得する必要がありますか?画像データを取得することはできますが、img要素の作成には使用できません。
追加された 著者 Artem Pyanykh,

このようにHTTPステータスをチェックすることはできません。しかし、画像がロードされたかどうかは、naturalWidthプロパティを使って確認できます。

if (img.naturalWidth === 0) {
   //do sth
}

それが助けて欲しい。

4
追加された
@Axle IE9へのアップグレードは強制されているので、IE7または8はありません。もし誰かが古いバージョンを持っているのであれば、それは海賊版Windows版です: - )とにかく(私が働いている会社は)最新ではないものは気にしません。実際には、Google Chromeでの動作はうまくいきます。
追加された 著者 Wojciech Bednarski,
@Axleあなたは2009年の投稿を参照しています。今はすべての最新のブラウザのバージョンで動作します。
追加された 著者 Wojciech Bednarski,
マイクロソフトのサポートポリシーによれば、2016年1月12日までサポートされているように見えます。開発者として、私たちのWebページがそれまで動作していることを確認する必要があります。
追加された 著者 Tarun,
@Axie、Wojciech、 img.complete は、イメージがロードされているかどうかを確認するために、または互換性を保証するためにonloadイベントにアタッチできるものです。
追加された 著者 Andy E,
このページを読んでいる人は、naturalWidthプロパティがすべてのブラウザでサポートされているわけではありません。このプロパティーも非常に面倒です - イメージがロードされた後でそれを読み取ろうとするべきです。 ( stackoverflow.com/questions/1645166/… )私はそれが助けて欲しい:)
追加された 著者 Axle,
私は以前のブラウザ(IE 7やIE 8など)をサポートする必要があるどこかで働くことがあります。似たような運命に苦しんでいる人もいると確信しています。私のことを信じて、「うーん、彼らは壊れた道具を更新すべきだ」と叫んだ。どこにも私を連れて来なかった。 :P
追加された 著者 Axle,
それはすばらしい。しかし、この議論は全く無意味です。問題は、旧式のブラウザ(政府も含む)を使用する人がいて、私たちの一部がそれをサポートしなければならないということです。私の最初のコメントは、あなたの攻撃ではありませんでした。これは、自分自身のように、他の悪い罠のために作られたもので、従来のブラウザをサポートすることを余儀なくされました。そしてそれは私がそれについて言わなければならないすべてです。
追加された 著者 Axle,
(私は上記のコメントにこれを追加するために猶予期間を逃したように見えます)私はまた追加したいと思います:あなたはどこにいても働けますか?
追加された 著者 Axle,

イメージにeventListenerを追加する必要があります:

例えばjQueryの場合:

$('#your_image')
    .error(function(e) {
        //add your unhappy code here

        //unbind if needed
        $(this).unbind('error');
    })
    .load(function(e) {
        //add your happy code here

        //unbind if needed
        $(this).unbind('load');
    })
    ;
4
追加された
.error()のAPI: "ブラウザがエラーイベントを発生させる前に取り付けるイベントハンドラが必要であるため、この例ではハンドラを添付した後ににsrc属性を設定しています" (重点])。
追加された 著者 David Thomas,
ちょうどそれにいくつかのjQueryを投げる、確かにそれは問題を解決します!
追加された 著者 Raynos,
OK。 eventDataオブジェクト "e"内にステータスコードがありますか?
追加された 著者 Artem Pyanykh,

あなたは、技術を組み合わせてimg.statusを得ることができます:



function error(img) {
   var r = makeXMLHttpRequestAgain(img.src);
   if (r.status === 500) img.src = '/e500.img';
   if (r.status === 503) img.src = '/e503.img';
}
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript