JQuery - «подожди, пока не будет готов»?

Question

У меня есть этот слайдер на моем сайте:

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

Работает нормально, но я нетнапример, как он загружается (вы можете увидеть список изображений с точками списка до того, как он будет готов).

Есть ли универсальный способ обойти это?Как загрузить слайдер в фоновом режиме, чтобы пользователи не видели его, пока он полностью не загружен (в то время как он загружается в фоновом режиме, например, я мог бы отобразить preloader.gif).

Я думал о непрозрачности: 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 после загрузки слайдера.