Preloading a DIV with image loading

I have a problem. I am working on a CMS, its name is Dolphin. In few words I have created a block that contains an heavy code (jQuery, javascript, php, HTML, images...etc..). What I want to do is to show a loading image until the content of this block is fully loaded. So even if it could seem strange, I need a preload function for a DIV. I need to do it because if I do not use it I can see 开发者_如何转开发the div composing slowly, and that's terrible. Do you know a good jQuery or javascript function that can help me with this? Just a loading image in the center of the DIV until its content is fully loaded. As soon as it is loaded then it will be shown.. Thank you!

The trick is setting the real div hidden by default and above it put the "Please wait" div.. in the end of the heavy coding add a line hiding the "Please wait" div and showing the real one.

Sample code for the required HTML:

<div id="pnlPleaseWait">
   Loading please wait...
<div>
<div id="pnlMain" style="display: none;">
   ....heavy stuff going on here...
   ....heavy stuff going on here...
   ....heavy stuff going on here...
</div>

And the jQuery lines in the end of heavy processing:

$("#pnlPleaseWait").hide();
$("#pnlMain").show();

Check others questions:

How to show loading spinner in jQuery?

How do I display an animated image during Page Load using jQuery

and so on