jQuery ajax not preloading images

Question

I have a list of galleries, when you click on the title of a gallery it pulls in the contents (HTML with images).

When the content is pulled in it preloads the html but not the images, any ideas?

This is the JavaScript i'm using:

    $('#ajax-load').ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() { $(this).hide();});


// PORTFOLIO SECTION 
    // Hide project details on load
    $('.project > .details').hide();
    // Slide details up / down on click
    $('.ajax > .header').click(function () {
      if ($(this).siblings(".details").is(":hidden")) {
        var detailUrl = $(this).find("a").attr("href");
        var $details = $(this).siblings(".details");

        $.ajax({
            url: detailUrl,
            data: "",
            type: "GET",
            success: function(data) {
                    $details.empty();
                    $details.html(data);
                    $details.find("ul.project-nav").tabs($details.find(".pane"), {effect: 'fade'});
                    $details.slideDown("slow");
            }});
      } 
      else {$(this).siblings(".details").slideUp();}
      return false;
    });

You can see this demonstrated at http://www.georgewiscombe.com

Thanks in advance!

Answer 1

$.ajax does not do any image preloading for you. It just retrieves data from the specified url. In your case you append the data as html ($details.html(data)). The browser then sees that there are images in that html and loads them.

As a workaround I can suggest one of the following:

1. Use CSS backgrounds instead (preferably with a CSS sprite)
2. Preload all referenced images (here is a working solution)