javascript - jQuery - “等到准备好”？

Question

我的网站上有这个滑块：

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

它工作正常，但我不喜欢它的加载方式（你可以在它准备好之前看到带有列表点的图像列表）。

有没有一种通用的方法可以绕过它？如何在后台加载滑块，以便用户在它完全加载之前看不到它（例如，当它在后台加载时，我可以显示 preloader.gif）。

我在考虑 opacity: 0 & 在 DOM 中的滑块之后淡化它，但也许还有其他方法？

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 更改它。