title: How can I exclude some images from being preloaded
body: <p>I really couldn't find an answer to this one.</p>
  
  <p>I have a preloader for a website. On the website there's a slideshow that includes 10mb animated gifs.</p>
  
  <p>Is there a way to exclude some of the gifs from being preloaded so that the website itself doesn't wait for a gif that won't show at the beginning of the slideshow anyway?
  Thanks!</p>
  
  <p>This is my preloader:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Preloader --&gt;
  &lt;div id="preloader"&gt;
   &lt;div id="status"&gt;
     &lt;div class="parent"&gt;
       &lt;div class="child"&gt;
         &lt;p class="small"&gt;loading&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background:#000; z-index:9999; }
  #status { z-index:28; position:absolute; color:#fff; top:50%; height:280px; width:100%; margin-top:-140px; }
  /* horizontal centering */
  .parent {width:280px; margin:0px auto; position:relative; height:280px; z-index:11}
  .child {text-align:center;}
  /* vertical centering */
  .parent {display: table}
  .child {display: table-cell; vertical-align: middle; padding:0 50px; }
  .child span { text-transform:uppercase; }
  </code></pre>
  
  <p>preloader.js:</p>
  
  <pre><code>jQuery(window).load(function() { 
  "use strict";
          jQuery("#status").fadeOut(350); // will first fade out the loading animation
          jQuery("#preloader").delay(350).fadeOut(200); // will fade out the white DIV that covers the website.
      });
  </code></pre>
  
  <p>EDIT:
  I found the following at <a href="http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/" rel="nofollow">This website</a></p>
  
  <p>I still don't know how to use it though. Any hints? would you say this could be what I'm looking for? thanks.</p>
  
  <blockquote>
    <p>Influencing the pre-loader</p>
    
    <p>Currently there are limited ways we can influence the pre-loader’s priorities (hiding resources using javascript is one), but the W3C Resource Priorities spec proposes two attributes to help signal our intent.</p>
    
    <p>lazyload : resource should not be downloaded until other resources that aren’t marked lazyload have started downloading</p>
    
    <p>postpone : resource must not be downloaded until it’s visible to the user i.e. within the viewport and display is not none.</p>
    
    <p>Although I’m not sure how easy it is to polyfill, perhaps postpone might enable a simple way of implementing responsive images?</p>
  </blockquote>