読込が完了したら画像を交換

このサーバーは基本的に速いので、高速回線を入れてると効果がよくわからないかも。
一瞬表示されるかもしれない黒い画像が読込中の画像です。

img00 / 110KB img01 / 110KB

img02 / 110KB img03 / 110KB

■効能

<img> の name に "change" が含まれていると、スクリプトはその画像を読込中のものに変更し、本来の画像をバックグラウンドでロードします。
ロードが終わると、読込中の画像を本来のものに戻します。

■使用方法

  1. ソースを見て、<head> にあるスクリプトをコピペします。
  2. スクリプトの方に、読みこみ中に表示する画像のパスを入れます。
    var loading = "loading.png"; //読みこみ中の代替画像
  3. 最後の画像より後に、以下の3行を入れます。
    <script type="text/javascript"><!--
      imageswap(); //スクリプト開始-->
    </script>
  4. あとは交換スクリプトを使いたい <img> に name="change00" を入れるだけです。
    "change" という文字さえ含まれていれば、別に数字でなくても構いません。name="samplechangeA" とかでもOKです。
    ただし、この name は同じ名前が重複してはダメです。
  5. JavaScriptが無効の時は画像は交換されず、普通に表示されます。

■注意

画像のURLを絶対に間違えないようにしてください。本来の画像が実在するかチェックできないので、無限ループに陥ります。（見た目上は変化ありませんが、ページを表示している限り、内部では永遠に読込チェックを繰り返します）

これを確認するには、
  //var test = 0; //確認用
  //window.status = test++; //確認用
の2ヵ所のコメントを外して有効にします。
無限ループに陥っていると、ステータスバーの数字がどんどん増えていきます。

■制限

画像交換スクリプトを使うと全プレでもれなく付いてくる問題なんですが、古いNetscapeでは最初に表示した画像で大きさが固定されてしまいます。このサンプルの場合は読込中画像が completexx.jpg と同じ大きさに調整されてしまいます。

なので、本来の画像の大きさが一定でない時は、読込中画像に Now Loading... などと書くと、びよびよに伸びたり縮んだりします。
これは回避できませんが、それ以外に支障があるわけでもないので、そういう古いブラウザをしつこく使ってる人には我慢してもらいましょう。

あるいは、

var di = document.images; //<img> のリスト
if (!di) return; //非対応ブラウザは却下

の2行を

var d = document, di = d.images; //<img> のリスト
if (!di || d.layers || (!d.all && !d.getElementById)) return; //非対応ブラウザは却下

に変えると、そういうブラウザではスクリプトが実行されなくなります。

■備考

当方では回線もサーバーも速くて、思った通りに動いてるのかいまいち確認できません。
もしかしたら、本来の画像のロードが終わるまで読込中画像に交換してくれないかもしれません。
その場合はブラウザの仕様ですのであきらめる他ないです。
対策がないわけではないですが、JavaScriptが無効だと画像が読込中のまま変更されなくなってしまいます。
公開されているページでそういうのは勘弁なので、素直にあきらめて速いサーバーを使ってほしいと思います。