title: Is there a way to create a loading screen but cap the time before it fades away?
body: <p>I am trying to create an HTML loading screen, concealing a large number of images until they are at least partially loaded. </p>
  
  <p>The following lines of code currently work but because of the size of the images, I need a way to cap the amount of time the browser spends trying to preload.</p>
  
  <pre><code>$(window).load(function(){
      $("#loadingScreen").fadeOut("slow");
      $('#content').fadeIn("slow");
  });
  </code></pre>
  
  <p>In trying to do so, I added the following:</p>
  
  <pre><code>$("#loadingScreen").delay(3000).fadeOut("slow");
  $('#content').delay(3000).fadeIn("slow");
  </code></pre>
  
  <p>My rationale is that the browser will first try to load all the images and after 3 seconds, even if the images are not fully loaded, the loading screen will disappear. This way, when one first visit to the site, he or she will spend a maximum of 3 seconds on the loading screen and in subsequent visits, he or she will spend even less time because the images will have been cached onto their computer.</p>
  
  <p>Individually, both sets of code work but when I try to use them together, only the second set of code runs. What am I doing wrong? Thanks!</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="loadingScreen"&gt;
          &lt;img src="img/loadingIcon.gif"&gt;
      &lt;/div&gt;
  
      &lt;div id="content" style="display: none"&gt;
          &lt;img src="img/image1.jpg"&gt;
          &lt;img src="img/image2.jpg"&gt;
          &lt;img src="img/image3.jpg"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>