Show image after loading via ajax

Question

Hello,

I’m setting up a site with no refresh. When the user clicks on the tab clients are loaded slides of the same, however as the embedded images have a 2mb and end up loading by part.

I wonder if there is an event that checks if an image added by ajax has been fully loaded. When loading the site I do with the event onload no body, but after loading the page, this event no longer works.

PS: I’ve used ajax’s Success/complete, but it doesn’t work because my ajax returns a string in html, which I then add in a div.

Thank you for your attention.

Answer 1

You can make a Event load for each image that returns from Ajax and calls a function when all are loaded.

A suggestion would be to create a div hidden to receive the return of Ajax with the images, count how many images returned and make a .each() creating a on load for each one. The images will be hidden in the div, and when all are loaded, you send the HTML of that div for the the div end and makes the fadeIn().

Create a div hidden anywhere:

<div id="oculta"></div>

And put in her CSS:

#oculta{
   display: none;
}

Create a function that will make the transition:

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
}

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

Why did I suggest using a hidden div?

So that in the div main you can place a message of "Opening..." or "Loading..." or some animated upload while the images are being loaded in hidden.

Answer 2

Simply with pure Javascript:

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;">

Then just do the implementation in Jquery and use the effects you want

Note: If it takes too long wait a little longer, is that I took a very large image for the effect to be very visible

Answer 3

Solution:

Well, actually from the beginning I was doing it right, the problem is that the image was loaded in a hidden div, so when I showed the hidden div with the image inside, then yes the image would be rendered.

With this, I loaded the page with all div’s visible and with the loading div over all of them, when the page finishes being loaded I hide all Divs (except the one I want to show the user) and the image appears fully rendered!

PS: It is not recommended to use images as large as 4mb. Because even after it is loaded, the rendering of it by the browser is slow and ends up being shown in parts.

Problem solved!

Thank you to everyone who followed and somehow tried to help!