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

你可以使用预加载和回调（is'n实际测试）的如下因素机制

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。