0

アイデアは、画像の読み込み中に読み込み中の div を表示し、終了時に div を非表示にすることです。このコードは Chrome/firefox では機能しますが、IE では機能しません。何か案が？

HTMLファイル

//image
<img src="image.php" class="loading">

//loading tag
<div id="loaddiv">
    <div id="loading_float"><img src="src/img/loading.gif">
    <br>Loading..
    </div>
</div>

JSファイル

var imgs_count=0, imgs_loaded=0;
$(function(){
$loading = $('.loading');
if($loading.size()>0){
    $loading.load(function(){
        $('#loaddiv').hide();
    });
}else{
    $('#loaddiv').show(); 
}
});
4

1 に答える 1

1

ページの HTML にある画像に onload ハンドラをアタッチするために JavaScript を確実に使用することはできません。これは、JavaScript が実行される前に、ページ DOM (およびそれによって参照される画像) の読み込みが開始される前に、JavaScript が実行される前に、画像が既に読み込まれている可能性があるためです。この問題は、IE が画像をほとんど瞬時にロードするため、画像がブラウザのキャッシュにあるとさらに悪化します。

考えられる回避策は 2 つあります。

  1. onload 属性を使用して、実際の HTML で onload ハンドラを指定します。
  2. ページの HTML に画像を配置しないでください。javascript を使用してそれらを動的に作成し.src、画像オブジェクトに属性を設定する前に onload ハンドラーを割り当てて、onload イベントを見逃さないようにします。
  3. JavaScript が実行され、ロード ハンドラーをインストールする前に、イメージが既にロードされているかどうかを確認し、それに応じて処理してください。
于 2012-08-12T08:37:26.907 に答える