jQuery - "wait until ready"?

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?

score 1 · Accepted Answer · answered Aug 12 '11 at 01:10

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

answered Aug 12 '11 at 01:10

karim79

339,989
67
413
406

this is a bit complex, I'll try it asap, but I was thinking about something more universal, that will work not only for this slider, but for any element. Maybe there's a library, jQuery plugin or something like that? – Wordpressor Aug 12 '11 at 01:27
@Wordpressor - this is a general solution. `showSlider` could be anything at all. All this does it count the 'whatevers' as they load and once they're all done, do something. – karim79 Aug 12 '11 at 01:29

score 0 · Answer 2 · answered Aug 12 '11 at 01:10

0

I would say apply css

.anythingSlider
{
    display:none;
}

and then change it with jQuery after the slider is loaded.

answered Aug 12 '11 at 01:10

Joseph Marikle

76,418
17
112
129

jQuery - "wait until ready"?

2 Answers2