2

10 秒ごとにサーバーからコンテンツを要求する ajax Web アプリケーションがあります。サーバーは、画像へのリンクを含む HTML を返します。現在、div タグの innerHTML をサーバーから返された HTML に設定しています。これにより、ページ全体をリロードすることなく Web ページが動的に更新されます。

ただし、問題は、innerHTML を設定した後に画像が個別に読み込まれ、アプリケーションがファンキーで遅く見えることです。

すべての画像を準備してから、すべてのリソースが揃ったときに innerHTML を交換するにはどうすればよいですか?

4

2 に答える 2

3

画像の DOM に属性 (またはデータ属性) を追加し、jQuery を使用して「ロード済み」イベントをリッスンし、ロード済み属性を true に変更します。次に、キューに静止画像があるかどうかを確認し、そうでない場合は、完全なプロセスのコールバックを実行します。

マークアップ:

<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />

擬似コード:

   function allImagesLoaded(){
      $('#yourmaindiv').show();
      console.log('images loaded!');
    }
    $('img.imgToLoad').load(function(){
      $(this).attr('loaded', 'true');
      if( $('img.imgToLoad[loaded=false]').length === 0 ){
        allImagesLoaded();
      }
    });
于 2012-07-24T20:18:51.003 に答える
2

あなたの画像の場合：

JavaScript

$(function () {
    preload();

    function preload() {
        var imageObj = new Image(),
            images = [];

        images[0] = 'img/1.png';
        images[1] = 'img/2.png';
        images[2] = 'img/3.png';
        images[3] = 'img/4.png';
        images[4] = 'img/5.png';

        for (var i = 0; i < images.length; i++) {
            imageObj.src = images[i];
        }
    }
});

HTML

<body>
    ....

    <!--[if IE]>
        <div id="preload">
            <img src="img/1.png" width="1" height="1" alt="" />
            <img src="img/2.png" width="1" height="1" alt="" />
            <img src="img/3.png" width="1" height="1" alt="" />
            <img src="img/4.png" width="1" height="1" alt="" />
            <img src="img/5.png" width="1" height="1" alt="" />
        </div>
    <![endif]-->
</body>

IE の CSS

#preload {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}
于 2012-07-24T20:06:08.247 に答える