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。