Question

I am using a custom jQuery slider to display some images and fade through to the next.

Here is the Jquery Code:

 (function($){

var simpleslider = function () {

  //     var interval_id = null;

    var feature = {
            holder: null,
            speed: 2000,   // 2 seconds.
            delay: 6000,  // 6 seconds. 
            index: 1,
            total: 0
    };

var fadeFrontFeatures = function(){


            feature.holder = $('#gallery .simple-slider').hide(); //  This gets the DIV with the class slider and hides them initially. 
            feature.total = feature.holder.size();

             interval_id = setInterval(fadeFrontFeatureNext, feature.delay);
             fadeFrontFeatureNext();

    };

     var fadeFrontFeatureNext = function(){

             var previous = feature.holder.eq(feature.index-1);

             if(feature.index == feature.total){ feature.index = 0; }

             var current = feature.holder.eq(feature.index);

             if(previous){ previous.fadeOut(feature.speed); }

             current.fadeIn(feature.speed, function(){
                     feature.index++;
             });

     };

     this.init = function(){

             fadeFrontFeatures();
          //  $("#gallery").mouseenter(function(e){ if (interval_id) { clearInterval(interval_id); interval_id = null; }});
          //  $("#gallery").mouseleave(function(e){ if (!interval_id) { interval_id = setInterval(fadeFrontFeatureNext, feature.delay); }});
     };

     return this;



}();

$(simpleslider.init);
}(window.jQuery));

and here is the HTML that it uses:

<div id="gallery">
  <div class="simple-slider">
    <img src="img/testimage.jpg" />
  </div>
</div>

So basically what ever is in the ‘simple-slider’ div will fade in, delay and fade out to the following ‘simple-slider’ div. That part if great, however, some of the images are quite large in file size and sometimes they have not loaded before the slider fadesout.

nb. Not an option lowering the file size 🙂

How can I get the slider to not fade out to the next image, untill it has loaded. and then, once they have all loaded it can just loop through.

I hope this makes sense. 🙂

Thanks folks.

Answer 1

The imagesLoaded() Plugin would be perfect to help you out.

It will allow you to load all the images in one call and use a callback function to then load your slider. If you follow the link I provided, it will show you a full use example of the plugin.