jQuery从PHP预加载图像以防止闪烁

页面每5秒刷新一次。从

.php

文件接收的图像被附加到一些

元素中

代码如下：

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 +'  " />')
   }
}

函数重载图像（）{
对于（i=0；i'））
}
}

一切正常。但是当调用

reloadImages（）

时，图像在重新加载过程中会闪烁

如何防止这种闪烁？预加载图像

---

帮助我解决闪烁问题。

您可以使用插件将图像加载到

display:none；

div中，然后在回调时将其移动到您的目标位置。

您可以使用以下预加载和回调机制（实际上未经测试）

函数重载图像（）{
对于（i=0；i

很高兴看到这样一个例子

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();        
      })
 }
}​