Question

I have this slider on my website:

http://css-tricks.com/examples/AnythingSlider/

It works fine, but I don’t like the way it loads (you can see list of the images with list dots before it is ready).

Is there a universal way of bypassing that? How to load the slider in the background so users don’t see it UNTIL it’s fully loaded (while it loads in the background I could display preloader.gif for example).

I was thinking about opacity: 0 & fading it after the slider in DOM, but maybe there’s other way?

Answer 1

I tend to use the following pattern:

// assumes slider is hidden
var imgCount = $("#slider img").length;
var loadCount = 0;
$("#slider img").one("load", function() {
    loadCount++;
    if(loadCount === imgCount) {

        // show slider once all images have loaded
        showSlider();
    }
}).each(function() {
    if(this.complete) $(this).trigger("load");
});