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