AJAX Question: How can I make sure the images are loaded before displaying table?

Question

Hello, I have a web page that uses jquery ajax to grab the table markup from another static page and insert it into my homepage and display it. The table I'm inserting contains images and the table displays before the images have been downloaded. So when my code displays the table, you can see the images showing up one at a time as they're downloaded and it's really ugly. Here's the code...

$(function()
{
  //AJAX LOAD, CREATE, AND INSERT PROJECTS MARKUP ONCE THE DOCUMENT IS READY 
  $('<div id="project_container" />').load('projects.htm #projects', function() 
  {
    $(this).hide().insertAfter('#header');
  });

  //CLICK EVENT FOR PROJECT LINK
  $('a#projects_link').click(function() 
  {      
    $('#project_container').stop(true, true).slideDown(500);       

    $.scrollTo( {top:'310px', left:'0px'}, 800);
  });   
});

Is there anyway to make jquery wait until the images have been loaded before sliding down the table and displaying it?

Thanks in advance for your help!

Answer 1

In jQuery, $(window).load() is generally how you run a piece of code once all the images are loaded. Just supply it with a function to do the grunt work:

$(window).load(
    function() {
        // weave your magic here.
    }
);