How can I exclude some images from being preloaded

Question

I really couldn't find an answer to this one.

I have a preloader for a website. On the website there's a slideshow that includes 10mb animated gifs.

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!

This is my preloader:

HTML:

<!-- Preloader -->
<div id="preloader">
 <div id="status">
   <div class="parent">
     <div class="child">
       <p class="small">loading</p>
     </div>
   </div>
 </div>

CSS:

#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; }

preloader.js:

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.
    });

EDIT: I found the following at This website

I still don't know how to use it though. Any hints? would you say this could be what I'm looking for? thanks.

Influencing the pre-loader

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.

lazyload : resource should not be downloaded until other resources that aren’t marked lazyload have started downloading

postpone : resource must not be downloaded until it’s visible to the user i.e. within the viewport and display is not none.

Although I’m not sure how easy it is to polyfill, perhaps postpone might enable a simple way of implementing responsive images?

Answer 1

I ended up using Cycle2 It progressively loads the images.

A programmer I know wrote this:

"You need to adapt the div-Block in your html file with the class "cycle-slideshow" and add the following attributes to the tag:

  data-cycle-loader=true
  data-cycle-progressive="#slideshow-images"

Your div-Tag should only contain one image now, the first one. All other images go on the list. The "slideshow-images" is an id (denoted by the # in front of it) of a list where you list all the images you want your slideshow to show and load progressively. It has the following form:

  <script id="slideshow-images" type="text/cycle">
  [
    "<img src='http://malsup.github.io/images/beach2.jpg'>",
    "<img src='http://malsup.github.io/images/beach3.jpg'>",
    ...
    "<img src='http://malsup.github.io/images/beach9.jpg'>"
  ]
  </script>"