javascript - jQuery - 「準備が整うまで待つ」?

Question

私のウェブサイトにはこのスライダーがあります：

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

私は次のパターンを使用する傾向があります。

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

Answer 2

私はcssを適用すると言います

.anythingSlider
{
    display:none;
}

スライダーがロードされた後、jQueryで変更します。