CODEWITHSUNDEEP
jqueryajaximageload
daryl
daryl

Reputation: 15197

Load content and preload images via AJAX?

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?

Upvotes: 4

Views: 6420

Answers (2)

Roger
Roger

Reputation: 15813

See the worked example here on how to preload your images;

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Upvotes: 1

Chris Laplante
Chris Laplante

Reputation: 29658

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.

Upvotes: 5

Related Questions