Você pode fazer um event load para cada imagem que retornar do Ajax e chamar uma função quando todas forem carregadas.
Uma sugestão seria criar uma div
oculta para receber o retorno do Ajax com as imagens, contar quantas imagens retornaram e fazer um .each()
criando um on load
para cada uma. As imagens ficarão carregando em oculto na div
, e quando todas forem carregadas, você manda o HTML dessa div
para o a div
final e faz o fadeIn()
.
Crie uma div
oculta em qualquer lugar:
<div id="oculta"></div>
E coloque o CSS dela:
#oculta{
display: none;
}
Crie uma função que irá fazer a transição:
function mostraDiv(){
// envia o HTML da div oculta e faz o fadeIn na div principal
$("#div-da-aba").html( $("#oculta").html() ).hide().fadeIn();
$("#oculta").empty(); // esvazia div oculta
}
No success
do Ajax:
success: function(data){
$("#oculta").html(data); // envia o retorno para a div oculta
var imgs = $("img", "#oculta"); // busca imagens pela tag img
var imgs_conta = imgs.length; // conta o número de imagens
var conta = 0; // seta um contador
// aqui eu crio um event load para cada imagem
imgs.each(function(i,e){
e.onload = function(){
conta++; // quando a imagem é carregada, incremento o contador
// se o contador alcançar o número de imagens, chamo a função
if(conta == imgs_conta) mostraDiv();
}
});
}
Por que eu sugeri usar uma div oculta?
Para que na div
principal você possa colocar uma mensagem de "Abrindo..." ou "Carregando..." ou algum loader animado enquanto as imagens estão sendo carregadas em oculto.