Complete Image

ウェブページの画像が全て読み込まれるまでリンクは全て無効になります。どうしても画像を見せたいときは、これをご使用下さい。

なお、Netscape2.0xやExplorer3.0xでは画像の読み込み具合をチェック出来ないので、普通にリンクします。

Demo:

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">

</script>

</head>

<body>


<a href="javascript:compImageCheck('http://www.yahoo.co.jp/')"> Yahoo </a>
<a href="javascript:compImageCheck('http://www.infoseek.co.jp/')"> Goo </a>
<a href="javascript:compImageCheck('http://www.excite.co.jp/')"> excite </a>


<img src="http://www2f.biglobe.ne.jp/~takan/javac/_image/psn00003.jpg"
name="picture1" border=0 onAbort="compImageReload()"
alt="この画像が完全に読み込まれるまでリンク出来ません">

<img src="http://www2f.biglobe.ne.jp/~takan/javac/_image/picture2.jpg"
name="picture2" border=0 onAbort="compImageReload()"
alt="この画像が完全に読み込まれるまでリンク出来ません">

<img src="http://www2f.biglobe.ne.jp/~takan/javac/_image/picture3.jpg"
name="picture3" border=0 onAbort="compImageReload()"
alt="この画像が完全に読み込まれるまでリンク出来ません">

</body>
</html>

Advice:

Arrangement:

指定の画像のみに適用する

上のサンプルでは、HTMLにある全ての画像が完全に読み込まれるまでリンクをキャンセルしますが、特定の画像のみ読み込ませればよいとしいう場合は次のようにします。

var compimgs = new Array()
compimgs[0] = "picture1"; //一つ目の画像。<IMG name='picture1'>
compimgs[1] = "picture2"; //二つ目の画像。<IMG name='picture2'>

スクリプトの中に、上記のように追記します。上記の例では、picture1とpicture2の２つの画像を完全に読み込まさせるよう登録しました。

   for(i=0; i<document.images.length; i++) {
     if(!document.images[i].complete) { flag = false;  break; }
   }

そして、上記のソースを下記のように書き換えます。

   for(i=0; i<compimgs.length; i++) {
     if(!document.images[compimgs[i]].complete) { flag = false;  break; }
   }