4

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!

DiegoP.
  • 45,177
  • 34
  • 89
  • 107

2 Answers2

6

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();
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • 1
    Do images get loaded in a block that has `display:none`? If they don´t you can position it off-screen as well and change the position when it´s done. – jeroen May 13 '11 at 22:34
  • @jeroen good question! Guess that simple image preloading (e.g. `var img = new Image(); img.src = "myImage.jpg";` is the safe way to take. :-) – Shadow The GPT Wizard May 13 '11 at 22:42
1

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

Community
  • 1
  • 1
jotapdiez
  • 1,456
  • 13
  • 28