0

Olá,

Estou montando um site sem refresh. Quando o usuário clica na aba clientes são carregadas lâminas do mesmo, porém como as imagens embutidas tem uns 2mb e acabam carregando por parte.

Gostaria de saber se existe um evento que verifica se uma imagem adicionada pelo ajax foi totalmente carregada. No carregamento do site eu faço com o evento onload no body, mas depois de carregada a página, este evento não funciona mais.

PS: Já usei o success/complete do ajax, mas não funciona porque o meu ajax retorna uma string em html, que depois eu adiciono em uma div.

Obrigado pela atenção.

3
  • Acredito que o melhor é diminuir o tamanho das imagens
    – Costamilam
    3/05/2018 às 19:16
  • Infelizmente não existe esta possibilidade, e mesmo que existisse se o usuário estiver com uma conexão lenta as imagens irão demorar pra carregar independente do tamanho... 3/05/2018 às 19:20
  • Conseguiu resolver?
    – Meu ovo
    7/05/2018 às 6:14

3 Respostas 3

2

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.

8
  • Fiz um teste com este código, porém acontece a mesma coisa que com os outros códigos, a imagem está carregando (no network que eu vejo essa informação) e ele dispara o evento antes de ela terminar de carregar, por via das duvidas eu dei um console.log nas informações e ele me retorna extamente as 4 imagens que tem na página. Ou seja, não tem erro de escrita e nem de lógica, apenas o evento on("load") está retornando true mesmo sem ter sido carregado! 3/05/2018 às 20:10
  • Aqui vc pode testar: dvdteste.hospedagemdesites.ws/stack/t5.php coloquei 2 imagens com 19mb cada.
    – Meu ovo
    3/05/2018 às 20:12
  • Mas ok, vou verificar melhor para ver.
    – Meu ovo
    3/05/2018 às 20:13
  • O load termina com 6s e o finish termina com 11s, pode ser por isso, não? prntscr.com/jddv8y 3/05/2018 às 20:19
  • No caso a imagem termina de aparecer quando o FINISH para e não quando o LOAD para... 3/05/2018 às 20:22
0

De forma simples com JavaScript puro:

document.getElementById('IDdaImagem').addEventListener('load',function(){ 
    this.style.display = 'block'
})
<img width="100px" heigth="100px" id="IDdaImagem" src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Big_%26_Small_Pumkins.JPG" alt="" style="display: none;">

Dai é só fazer a implementação no JQuery e usar os efeitos que quiser

Obs.: Se tiver demorando muito espere mais um pouco, é que peguei uma imagem muito grande para o efeito ficar bem visível

0

Solução:

Bom, na verdade desde o início eu estava fazendo certo, o problema é que a imagem era carregada em uma div oculta, logo, quando eu mostrava a div oculta com a imagem dentro, ai sim a imagem seria renderizada.

Com isso, carreguei a página com todas as div's visíveis e com a div de carregamento por cima de todas elas, quando a página termina de ser carregada eu escondo todas as divs (menos a que eu quero mostrar ao usuário) e a imagem aparece totalmente renderizada!

PS: Não é recomendado usar imagens tão grandes como 4mb. Pois mesmo após ela ser carregada, a renderização da mesma pelo navegador fica lenta e acaba sendo mostrada em partes.

Problema resolvido!

Obrigado à todos que acompanharam e de alguma forma tentaram ajudar!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .