jquery, ajax, and waiting until data is fully loaded

    Date: 01/27/10 (Javascript Community)    Keywords: php, html

    We have this little image gallery thing built with jquery. It fetches a page that selects some random images and writes some html, then updates the html in the image gallery container. It's supposed to work like this:

    - button clicked
    - fetch page
    - data received
    - old stuff fades out
    - new stuff fades in

    The images loaded are really big (they're coming from a photographer and we have no control over the file size), so what's happening is the "new stuff fades in," event is occurring while the images are still loading, and it looks kind of dumb. This is a simplified version that just loads one random image: