Preloading a DIV with image loading

Question

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!

Answer 1

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();

Answer 2

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