Question

I have an ajax web application, where every 10 seconds I request content from the server. The server sends back HTML with links to images. Right now, I set the innerHTML of a div tag to the HTML returned from the server, which dynamically updates the web page with out reloading the whole page.

HOWEVER, the problem is, the images load separately after setting the innerHTML causing the application to look funky and slow.

How can I have all my images ready and then swap the innerHTML when I have all the resources?

Answer 1

Add an attribute(or data attribute) to the DOM of the images, then with jQuery listen for the “loaded” event change the attribute loaded to be true. Then verify if still images in the queue, if not execute a callback for the complete process.

Markup:

<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />

Pseudocode:

   function allImagesLoaded(){
      $('#yourmaindiv').show();
      console.log('images loaded!');
    }
    $('img.imgToLoad').load(function(){
      $(this).attr('loaded', 'true');
      if( $('img.imgToLoad[loaded=false]').length === 0 ){
        allImagesLoaded();
      }
    });