0

ページは5秒ごとに更新されます。ファイルから受け取った画像は、いくつかの要素.phpに追加されます。<li >

コードは次のとおりです。

function reloadImages(){
   for ( i = 0; i < ImgNum; i++) {
      var ts = Math.round((new Date()).getTime() / 1000);
      $('li#' + i).html('<img src="img.php?session=<?php echo $session; ?>&img=' + i + '&time='+ ts +'  " />')
   }
}

すべてが期待どおりに機能します。ただし、reloadImages()が呼び出されると、リロード中に画像がちらつきます。

このちらつきを防ぐ方法は？画像をプリロードしますか？

ちらつきに対処するのを手伝ってください。

4

2 に答える 2

1

プリロードとコールバックの次のメカニズムを使用できます（実際にはテストされていません）

function reloadImages(){
 for ( i = 0; i < ImgNum; i++) {
  var ts = Math.round((new Date()).getTime() / 1000);
     //this is old image        
     $('li#' + i).find('img').addClass('oldimage');   
     //adding and loading new image
     $('<img style="display:none;"/>').appendTo($('li#' + i))
                  .attr("src", "img.php?session=<?php echo $session; ?>&img=' + i + '&time='+ ts +'  ")
                  .load(function(){
                  //when it is loaded hide the old one
                   $(this).show();
                   $(this).parent().find('.oldimage').hide().remove();        
      })
 }
}​
于 2012-07-17T10:56:39.013 に答える
0

https://github.com/desandro/imagesloadedプラグインを使用して、画像をdisplay: none;divにロードし、コールバック時に目的の場所に移動できます。

于 2012-07-17T10:48:42.443 に答える