how do i show a 'loading' animation?

So ive been trying out a couple jQuery plugins to help assist me in showing a loading div/img when content is being fetched using ajax, but alas it's all been unsuccessful, the code i use is this:

jQuery(document).ready(function($) {
        function load(num) {
            $('#pageContent').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#bbon a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

im guessing there might be an easy way to implement such code in this, but, my pages are relatively small in size apart from one (which is why i want a 'loading' div/img displayed).

Do you think i should simply preload the content of that one page thats large instead of utilising another plugin or code?

if so is there a preload in jquery for content? i know there is for images.

You can accomplish what you're trying by adding an animation before you try to load the contents and letting the animation disappear in the callback of load().

jQuery(document).ready(function($) {
        function load(num) {
            $('#pageContent').load(num +".html", function() {
                $('#animation').hide();
        });
    }

    $.history.init(function(url) {
        load(url == "" ? "1" : url);
    });

    $('#bbon a').live('click', function(e) {
            $('#animation').show();
            var url = $(this).attr('href');
            url = url.replace(/^.*#/, '');
            $.history.load(url);
            return false;
        });
});

Make an image or a div with id=animation that is hidden as default.

Try this:

   function load(num) {
         $('#pageContent').html('<img ....') //some random image here
         $('#pageContent').load(num +".html");
     }