, отображающий загрузчик при инициализации слайдера изображений jQuery

Question

Привет, я построил большую галерею изображений с использованием this wonderful jQuery slider, и учитывая количество слайдов, в которые я включаю, начальное время загрузки значимо, и мне интересно, есть ли простой способ для меня интегрировать базовую анимацию анимации загрузки - например. spinner с "load gallery .." text--, который скрыт, как только ползунок полностью загружен? Мне любопытно, есть ли способ настроить DOM для первого отображения загрузочного div и, возможно, использовать одну из функций обратного вызова слайдера - или через jQuery (?) - вытащить div при полной инициализации? В конечном счете, я надеюсь отобразить что-то пользователю в течение 5-10 секунд, когда скрипты, разметка и миниатюры загружаются в браузер (я использую функцию ленивой загрузки, поэтому, по крайней мере, не изначально загружаю все полные -размер.)

Спасибо за понимание.

Answer 1

Вы можете сделать это как показано ниже, но помните, что он не тестировался.

JS

$(window).load(function(){ 
    // initialize slider. 
    // remove loading_image image as below 
    $('img#loading_image').remove(); 
});

HTML

<div><img src="loading.jpg" alt="" id="loading_image" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div>

CSS

#loading_image { display: block; other css code. } 
.hide { display: none; }

Надеется, что это поможет, что этот код делает ООН пока страница полностью загружена, она скроет все изображения слайдера, кроме загрузки изображения, и как только страница будет полностью загружена всеми изображениями, она будет работать по мере необходимости.