title: How to load all background images at one time
body: <p>I have first website page and it have few background images, which are crossfading. </p>
  
  <p>So, the problem is that when page are not cached at computer at first, it's took some time to load next background image on crossfading effect. </p>
  
  <p>Any ideas how to load all images at once?</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/sawqo6j9/" rel="nofollow">https://jsfiddle.net/sawqo6j9/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i=0;
  var imghead=[
   "url(http://www.psdgraphics.com/file/abstract-mosaic-background.png)",
   "url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg)",
   "url(http://www.mrwallpaper.com/wallpapers/gradient-background.jpg)"
   ];
  
  function slideimg() {
      setTimeout(function () {
          jQuery('body').css('background-image', imghead[i]);
          i++;
          if(i==imghead.length) i=0;
          slideimg();
      }, 6000);
  }
  slideimg();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
       height: 100%;
  } 
  
  body {
       background: url(http://www.psdgraphics.com/file/abstract-mosaic-background.png) no-repeat center center fixed;
      -webkit-background-size: auto 100%;
      -moz-background-size: auto 100%;
      -o-background-size: auto 100%;
       background-size: auto 100%;
      -webkit-transition: all 2s ease-in;
      -moz-transition: all 2s ease-in;
      -o-transition: all 2s ease-in;
      -ms-transition: all 2s ease-in;
       transition: all 2s ease-in;
       margin: 0;
       padding: 0;
      font-family: Arial;
      font-size: 14px;
      color: #fff;
      margin: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;There goes page content&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>