title: Preload images before opening the page
body: <p>I am designing a index page that has a pretty big background image (I do not want to make it smaller since I don't want the image to have noise and distort on bigger screens) and what I want is when you access that index page, before displaying the content to show you a <strong>preloader</strong> .gif and preload the background image and only after the image is loaded to let you see the content.</p>
  
  <p>I want this because I don't want people with slower specs on the PC or a bad internet connection to see how that background image is being loaded line by line.</p>
  
  <p>CSS :</p>
  
  <pre><code>&lt;style&gt; 
  #bg { position: fixed; top: 0; left: 0; }
  .bgwidth { width: 100%; }
  .bgheight { height: 100%; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Jquery :</p>
  
  <pre><code>&lt;script&gt;
      $(function() {   
  
          var theWindow        = $(window),
              $bg              = $("#bg"),
              aspectRatio      = $bg.width() / $bg.height();
  
          function resizeBg() {
  
          if ( (theWindow.width() / theWindow.height()) &lt; aspectRatio ) {
              $bg
              .removeClass()
              .addClass('bgheight');
          } else {
              $bg
              .removeClass()
              .addClass('bgwidth');
              }
  
          }
  
              theWindow.resize(function() {
                  resizeBg();
              }).trigger("resize");
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And HTML :</p>
  
  <pre><code>&lt;img src="images/bg.jpg" id="bg" alt=""&gt;
  </code></pre>