私は正確に同じサイズで絶対的にお互いの上に置かれたいくつかの画像を持っています。それらはすべて透過的な.gifで、背景イメージ（Zインデックスが最も小さいもの）は例外です。行動面では、背景画像は常に私のページにとどまります。他の画像は、チェックボックスを使用してオンまたはオフに切り替えることができます。画像読み込みシーケンスの制御
私の問題は、遅い接続でページが読み込まれる場合です。透明な画像はサイズが小さいので、最初に読み込まれ、背景画像が読み込まれるまで魅力的ではありません。
背景画像の読み込みが完了するまで画像が表示されないように画像がロードされる順序を制御する方法はありますか？私はそうすることで私のページの読み込み時間を遅くしたくないし、画像を同期的にロードするように見えるだろう。
イメージオブジェクトのonLoadイベントを使用できます。
<html>
<head>
<script type="text/javascript">
function imageLoaded(imgId, url) {
alert(imgId);
var img = document.getElementById(imgId);
img.src = url;
}
</script>
</head>
<body>
<img id="bg" src="http://pupunzi.files.wordpress.com/2009/01/imgnav.jpg?w=350&h=285" alt="image" onLoad="imageLoaded('img1', 'http://forbiddenplanet.co.uk/blog/wp-content/uploads/2009/01/Adam%20Elliot%20Max%20and%20Mary%20animation.jpg');" />
<img id="img1" onLoad="imageLoaded('img2', 'http://pupunzi.com/images/components/mb.imageNavigator.png');" alt="image 1" />
<img id="img2" alt="image 2"/>
</body>
</html>
この例では、前の画像がロードされたときのイメージの読み込みを警告するようにしました。