title: Please wait content won't load until page is fully loaded
body: <p>I'm trying to use the normal approach to create an element and hide it using jQuery once the page finished loading. </p>
  
  <p>You can see this basic approach in many places but here's the code anyway: </p>
  
  <p><em>DIV for the image I'd like to display while the page loads, right after the <code>&lt;body&gt;</code> tag:</em></p>
  
  <pre><code>&lt;div class="pleasewait"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><em>To remove the icon from the screen after the page loads, in the HEAD section of the HTML page:</em></p>
  
  <pre><code>$(window).bind("load", function() {
      $(".pleasewait").fadeOut("slow");;
  });
  </code></pre>
  
  <p><em>CSS to style the image in the center of the page:</em></p>
  
  <pre class="lang-css prettyprint-override"><code>.no-js #loader { display: none; }
  .js #loader { display: block; position: absolute; left: 100px; top: 0; }
  .pleasewait {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url(img/ajax-loader.gif) center no-repeat #fff;
  }
  </code></pre>
  
  <p>I get the nav bar on my PHP page to load ok but nothing on the <code>&lt;body&gt;</code> section is displayed until the page fully loads (including waiting for the server call to complete and form the remainder of the page). </p>
  
  <p>While there are other fancier methods of achieving my goals, I would really like to understand what I'm doing wrong here. </p>