мигает и мерцает при обновлении содержимого div из ajax

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