views:

211

answers:

1

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!

+2  A: 

$.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)
korchev
Hi,Thanks for the reply,I don't really want to use CSS background images, it's not very accessible and could become a nightmare to maintain. The second option looks good, not sure how I would integrate it with my code — help appreciated :)
George Wiscombe
Include the implementation of the preloadImages routine from tha blog post. In $(document).ready() call the preloadImages routine and specify the urls of the images you want preloaded.
korchev