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 回答