how do i display a message of loading or search while a page is loading then hide the message and display the site?

here is a site i'm refering to: http://www.graphicfirm.com/index.php

if you scroll down t开发者_如何学JAVAo the bottom and for example click on automotive while the pictures are being loaded you see a message that says searching.... and then when you click on a picture everything is kind of dimmed and you see the message loading...

how is this done with jquery/ajax?

correct me if im wrong but this is my best guess.

$.ajax({
       url: "ajax.php",
       type: "GET",
       dataType: "json",
       data: "attribute=myvalue",

        beforeSend: function()
        {

            $(".mymessage").show();
            //dim page
        },

        complete: function()
        {

            $(".mymessage").hide();
            //undim page
        },

        success: function(data)
        {

            //load data               

        }

});

if i got it right how would they be dimming the page? if i got it wrong can you show me a sample?

thanks

---

Look at: http://malsup.com/jquery/block/

This allows you to block the entire site while displaying a message to your user.

---

That's how you should do this:

$(".mymessage").show();
$.ajax({
       url: "ajax.php",
       type: "GET",
       dataType: "json",
       data: "attribute=myvalue",
        success: function(data)
        {
           $(".mymessage").hide();
           //load data
        }
});

Put $(".mymessage").show(); before ajax call and hide it right when the success occurs.