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

Question

页面每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()时，图像在重新加载过程中会闪烁。

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

帮我解决闪烁的问题。

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

Answer 2

您可以使用https://github.com/desandro/imagesloaded插件将图像加载到display: none;div中，然后在回调时将它们移动到您的目的地。