WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptでの画像ロード判定

けい [MAIL] [WriteDate : Sat Apr 21 22:38:32 2001]

皆さん、こんにちは。
最近JavaScriptを始めたばかりの初心者です。

ブラウザが画像をロード出来るか否かの状態を判断して処理を分岐させたい
のですが何か良い方法はないでしょうか?
本や色んなサイトを自分なりに調べて"onload"を使って下記のような
ソースを記述したのですが、うまく動作しません。

onloadが実行する関数(imgLoadChk)にalertを記述すれば実行されるので
ソースそのものは動作していると思います。
ですが変数"imgFlag"は常に"0"のままになっているので後述のif文で分岐
出来ません。
JavaScriptではグローバル変数は使えないのでしょうか?

皆さん宜しくお願いします。

HEAD内記述
<!--
  function imgLoadChk(){
   imgFlag = 1;
   return imgFlag;
  }
//-->

BODY内記述
<!--
  var imgFlag;

  document.write("<IMG SRC='index_title.gif' onload='imgLoadChk()'>");

  document.write(imgFlag); <-imgFlagが"0"or"1"になったかのデバック用

  if(imgFlag){
   画像ロード可の処理
  }
  else{
   画像ロード不可の処理
  }
//-->


ちゃいぱ [WriteDate : Sun Apr 22 07:09:35 2001]

確か onAbort か onError で処理できたと思います。
家だと資料がないので、詳しくは、月曜日以降に...。


けい [MAIL] [WriteDate : Sun Apr 22 11:08:19 2001]

ちゃいばさん、こんにちは。

お手数お掛けします。宜しくお願い致します。


ちゃいぱ  [WriteDate : Mon Apr 23 11:38:30 2001]

以下でどうですか?

<html>
<head>
<title>test onError</title>
<script>
function err_shori(){
    alert("画像ロード不可の処理");
}

function nor_shori(){
    alert("画像ロードの処理");
}
</script>
<head>
<body>
<p>
<img src="〜〜" alt="test" onAbort="err_shori()" onError="err_shori()" onLoad="nor_shori()" >
</p>
</body>
</html>


ween [WriteDate : Mon Apr 23 13:52:20 2001]

onload イベントは「画像をロード出来るか否か」ということではなく
「画像のロードが完了したかどうか」で発生するイベントです。微妙な違いですけれども。
要はブラウザが実際に画像を取りにいって、10kb でも 100kb でも画像ファイルを読みこんで
読みこみが完了した時に onload イベントが発生して
この場合は imgFlag が 1 になります。

なので、画像が存在する場合でも
imgFlag を参照している時点で読み込み中ならば
onload イベントがまだ発生していませんから
imgFlag は 0 のままです。
応答待ちの状態ならば onError イベントも発生しないと思います。

ページ全体の読みこみが完了した後ならば
imgFlag で分岐処理すれば望んだ結果になると思いますが
body の中で imgFlag を参照して document.write() の内容を変えようとか
そういうことだとちょっと難しいんじゃないかと思います。


けい [MAIL] [WriteDate : Mon Apr 23 23:23:57 2001]

ご助言ありがとうございます。

まずはすみまんせん。僕の最初の問いが不十分でした。
ブラウザの設定で「画像を読み込む」のチェックが外れている場合は処理を中断し
チェックされている場合はそのまま<BODY>の内容を書くスクリプトを書きたいと
思っています。

navigator.javaEnabled()のimage版みたいなのがあると助かるのですが…。

>ちゃいぱさん
onErrorを試したところイベントは指定したURLに画像が無い時に発生するようです。
ですので「画像を読み込む」のチェックが外れている場合はイベントが発生しない
ので、希望している動作とはちょっと違うようです。
説明不足でお手数お掛けしました。

>weenさん
コメントを参考にして<HEAD>内で画像を先読みしたところIE5.0では動作しました。
ただローカルで行っていたので、読み込みと判定のタイミングがたまたま良かった
かもしれません。またIE5.5、NN4.7では動作しません(imgFlagが常に0)でした。

やっぱり無理なのでしょうか?


ちゃいぱ  [WriteDate : Tue Apr 24 09:05:09 2001]

>「画像を読み込む」のチェックが外れている場合は
このプロパティは、andiさんが知っていそう? andiさ〜ん!!


Nobu3 [MAIL] [URL] [WriteDate : Tue Apr 24 09:28:12 2001]

alt属性ではダメなの?

<img src="title.png" alt="○○のページ" (以下略)>


けい [MAIL] [WriteDate : Tue Apr 24 23:08:54 2001]

>Nobu3さん

imageを読み込む事で動作させるCGI(例えばカウンタなど)を確実に
動作させたいので、ブラウザ設定の「画像を読み込む」のチェックが
外れている場合は処理を中断し、チェックされている場合はそのまま
<BODY>の内容を書くスクリプトを書きたいと思っています。


Nobu3 [MAIL] [URL] [WriteDate : Wed Apr 25 07:00:43 2001]

なるほど。
でも、そうだとしても、JavaScriptがオフでかつ画像読みこみをオフにしてるときは、どうにもできませんよね?

可能であれば、SSIを使えばいいんでしょうが…。


謎の人A [WriteDate : Wed Apr 25 07:42:03 2001]

例えばカウンタの場合は、画像ではなく単に数字を出力するようにCGIを作って、それをCSSで配置と飾りを設定した方がよいのでは。
画像だと、ブラウザの設定を気にしないといけないけど、テキストとCSSだと何も気にすることはないし、多くのブラウザに対応できるし、データ転送量も少なくなるし、レイアウトの自由度も大きくなるのでは。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World