title: Page "Splash Screen Div" on outgoing and loading pages
body: <p>I already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.</p>
  
  <p>E.g.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div id="loading-Div"&gt;
  
          &lt;div id="bear-Logo"&gt;
  
              &lt;div id="target"&gt;
                  &lt;div id="target2"&gt;
                      &lt;div id="bearloop"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>loading.css</strong></p>
  
  <pre><code>Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
  </code></pre>
  
  <p><strong>loading.js</strong></p>
  
  <pre><code>$(window).load(function(){
  
      $( '#loading-Div' ).addClass( 'fallback' );
  
  });
  </code></pre>
  
  <p>The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the <code>.css</code> is imported in the <code>&lt;head&gt;</code> with the <code>.js</code> just before the end of the <code>&lt;body&gt;</code> tag.</p>
  
  <p>This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded. </p>
  
  <p><strong>Workflow:</strong></p>
  
  <p><a href="http://i.imgur.com/dIOZSMS.jpg" rel="nofollow">http://i.imgur.com/dIOZSMS.jpg</a></p>
  
  <hr>
  
  <p><strong>Key Points:</strong></p>
  
  <p>I have a feeling this is only possible with a browser plugin because:</p>
  
  <ol>
  <li>The link <strong>isn't</strong> an anchor to another div. E.g. <code>url#div -&gt; url#div2</code></li>
  <li>Based on the above, given that the link is to another <code>.html</code> page the content currently displayed would... stop based on how pages are displayed in nature.</li>
  </ol>
  
  <p><strong>Note that:</strong></p>
  
  <ol>
  <li>This is strictly intra-site.</li>
  <li>I don't care about IE.</li>
  <li>This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.</li>
  </ol>
  
  <hr>
  
  <p>I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.</p>
  
  <p>Any ideas guys? I am very stumped on this.</p>