Question

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.

Answer 1

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.