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

你可以使用preload和callback的下面的机制（实际上已经过测试）

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中，然后在回调时将其移动到您的destionation。

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

2 个答案: