從ajax更新div內容時閃爍和閃爍

Question

我正在從服務器獲取數據。數據包含許多圖像和其他一些html元素。當用服務器響應替換div的內容時，它總是在div內閃爍。

$('#div').html(serverResponse); 

我也跟着這個方法：How to avoid blinking when updating page from ajax但仍閃爍

如何防止閃爍。

Answer 1

您可以先隱藏'#div'，然後等到所有images都加載完畢，然後顯示'#div'。

$.ajax({ 
    url: '', 
    success: function (serverResponse) { 
     $('#div').html(serverResponse).hide(); 

     var $imgs = $('#div img'), //all images inside '#div' 
      len = $imgs.length, 
      imgs_loaded = 0; 

     $imgs.load(function(){ 
      imgs_loaded++; 
      if(imgs_loaded == len){ 
       $('#div').show(); 
      } 
     }); 
    } 
});