htmlの要素内のデータの有無は判定できますか？

質問

例えば、
<img src="png/gr3001.png" width="204" height="120">
のようなタグがあるとき、
この png/gr3001.png が存在しなければ、
当然画面には何も表示されません。
（ブラウザよっては X 印がでます。）

このように、データがない状態というのを、
画面の描画が終わったあとで、
javascriptなどで判定することはできるのでしょうか。

よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

HTML(大文字!!)の要素には、内容をもてない物があります。IMG要素は内容をもてません。
『HTMLの要素型には、内容が存在しないものもある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.1 )』

　IMG要素は、置換インライン要素と呼ばれ、src属性によって改めてサーバーにそのファイルを要求します。Live HTTP Headers( https://addons.mozilla.jp/firefox/details/3829 )などで確認。

　言い換えれば、サーバーとの交信(サーバーの応答ヘッダ)で404が帰ってくれば、そのファイルは存在しないことになります。

　サーバーとの交信を補足するのは不可能ではないですが、そんなことより
＞この png/gr3001.png が存在しなければ、当然画面には何も表示されません。
　いえ、alt属性は必須
　⇒alt属性は、IMG要素とAREA要素では必ず指定しなければならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )
　なのですから、必ずalt属性の内容が表示されます。

<img src="./images/test01.png" width="240" height="180" alt="この画像test01.pngはありません">
<img src="./images/test02.png" width="240" height="180" alt="この画像test02.pngはありません">
で済ませます。

補足

回答をありがとうございました。
参考になりました。
今回は、画像の表示場所を固定したくない（存在する画像を前詰めで出したい）ので、
あらかじめ html で描画後、各画像について

　　var image = new Image();

　　image_name = 'png/gr300' + String(i + 1) + '1.png';
　　image.src = image_name;
　　image_width = image.width; // 幅
　　image_height = image.height; // 高さ

のようにして画像サイズを取得し、
サイズ0ならその要素を削除する、
というふうにとりあえず作りました。

このようなやりかたをするにしても、
もう少しブラッシュアップできそうですが。

回答No.3

kamikami30

http://www.openspc2.org/reibun/AdobeAIR/1.5/JavaScript/file/0203/index.html

Javascriptならこんな感じでできるそうね。

ただ、それなりに重そう。

やりたいことは
特定のディレクトリ内にある規則性のある画像全てを、imgタグを使ってブラウザに出力したい。

かな？

言語は何でもいいなら、PHPでやってみたらどうでしょ？

特定のディレクトリにある全てのファイル名を取得して

必要があればソートして

imgタグと合わせてHtml出力

要らないものを出力してから見えなくするより、
要らないものなら最初から出力しない方がスマートで私は好きですね。

お礼

お礼が遅くなりすみません。
実はここで質問をする前にphpで作ったんですけど、
依頼主から、サーバーアプリにしたくない、クライアント側でやってほしい、
と言われまして。
そこで、javascriptだけで完結させたかったのでした。
教えていただいたサイトの内容を、参考にさせていただきます。
ありがとうございました。

回答No.1

kamikami30

Javascript等の等ってなんですか？

ファイルの存在をチェックすることは色々な言語で可能です。

補足

回答をありがとうございます。

自分はJavascriptを少しかじっている、
というか最近取り組み始めたばかりの者です。
よくよく知っているわけではないので、
Javascript以外でもなにかあるのであればと思い、
「等」とした次第です。

>ファイルの存在をチェックすることは色々な言語で可能です。
今直面している問題は、実際にはまさにそれで、
どうやったらサーバー上にあるファイルの存在をチェックできるのか、
ということです。

都合があってサーバー側でチェックするすることができず、
クライアント側でチェックをしたいのです。
Javascriptからサーバーにアクセスをしてファイルの有無を確認する方法は、
それもやり方がわからず、
実はJavascriptのカテゴリーの方でもその方法について尋ねているところです。

別のアプローチとして、
HTML上にすでに展開されたデータの有無をチェックできないだろうか
と思った次第です。

最終的にやりたいことは、サーバー上の画像を表示したいだけなのですが、
サーバーには、いくつの画像があるか不定なのです。
サーバー上の位置と、ファイル名の命名規則は明らかなので、
とりあえず、100個分の表示を

<img src="png/gr3001.png" width="204" height="120">
<img src="png/gr3002.png" width="204" height="120">
<img src="png/gr3003.png" width="204" height="120">
　　：
<img src="png/gr3100.png" width="204" height="120">

のようにして行い、
画面の描画が終わった後で、
データのない要素を削除することはできないか、
そのためにデータの有無を判定できないか、
と考えた次第でした。