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:

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

友情链接