loading Markup asynchronously (loading some div after the page load ends)

I've my mark up below

<div id="loggedIn">
    <div id="left-col" class="left">
        <div id="nav">
                <!-- load later -->
                <?php include('file1.php'); ?>
        </div>
        <div class="clear"></div>
    </div>
    <div id="right-col" class="left">
        <!-- load later -->
            <?php include('file2.php'); ?>
    </div>
</div>

So I want the page to load the markups first. Then I want to show the ajax loading animated gif image until file1.php and file2.php are loaded.

I want to do that in jQuery. I was thinking开发者_开发技巧 of something like $("#nav").load('file1.php'); but when do I fire the event?

Can anyone help me with the jQUery codes??

You could add the image in your div before loading the content via Ajax :

<div id="loggedIn">
    <div id="left-col" class="left">
        <div id="nav">
        <!-- load later -->
        <img src="ajaxLoader.gif" id="ajaxLoader1"/>
        </div>
        <div class="clear"></div>
    </div>
    <div id="right-col" class="left">
        <!-- load later -->
        <img src="ajaxLoader.gif" id="ajaxLoader1"/>
    </div>
</div>

Then load the content using load() when the DOM is ready :

$(document).ready(function() {
    $("#nav").load("file1.php", function() {
        $("#ajaxLoader1").remove();
    });
    $("#right-col").load("file2.php", function() {
        $("#ajaxLoader2").remove();
    });
});

This will load the php file in the div, and remove the <img> when it's done.

jsFiddle example here

You could put your load calls in a document-ready handler and use its callback to track when something has finished loading:

$(function() {
    function done_checker() {
        /* See below */
    }

    // Show loading image here
    $('#nav').load('file1.php', done_checker);
    $('#right-col').load('file2.php', done_checker);
});

The done_checker function would wait until both files have loaded and then remove the loading image; see this answer for notes on how to build a done_checker.