Question

Say I have like:

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#content').load(h);
    });
});

That actually doesn’t load the images as well it just loads the content, how do you go about loading the actual images too?

Some people didn’t seem to understand: what I mean is it does load the images but doesn’t ‘preload’ thus meaning you witness the images load individually.

Edit: Say the href was equal to somepage.html and that page had images on it as well as content, yes it would load the images and the content but it doesn’t actually preload the images at all, you’re still witnessing the images load individually. How would one go about preloading the images in the request itself?

Answer 1

Try this:

1. Hide the #content div, and call load on it. This will load the content invisibly so your users don’t see the images load afterwards
2. Bind load event handlers on each image, and when they have all fired, re-show the #content div

See this answer for reference: Know when images are done loading in AJAX response. It will show you exactly what to do.