Question

In jQuery, I know I can use the $.ajax function to load a page’s html from a given URL.
However, I’m interested in loading the htmla nd all resources on that page before displaying it. How would I go about doing that?

Example:
Say I have the following html in a file called about.html

<h1>About BigImage</h1>
<img src="/images/reallybigimage.jpg" />

Notice that I have an image in this page. Using jQuery’s ajax function, I would get a “success” as soon as the HTML finished loading, but not the image.

Here’s the kicker, though: I don’t know how many/which images I’ll have in the page, and it’s not just images I want to be loading — it’s all the page’s resources — css and all.
Any way to do this?

Thanks!

Answer 1

If relative paths are not a problem, in your success function, you can then attempt to find all of the links and load them like this:

//....
success:function(data){
    $("*",data).each(function(){
        if($(this).attr("src")){
            $.ajax({url:$(this).attr("src"),dataType:"text"});
        }
        if($(this).attr("href")){
            $.ajax({url:$(this).attr("href"),dataType:"text"});
        }
    });
}
//....