Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:
alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much