Материализуйте предварительный загрузчик

Question

Я новичок в веб-дизайне, и я нашел структуру MaterializeCSS (с той же целью, что и Bootstrap).

Итак, я нашел код предварительного загрузчика, но, к сожалению, я не знаю, где его разместить.

Я хочу, чтобы этот круговой погрузчик появился при загрузке карусели. Это мой Carousel код:

<div class="carousel"> 
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a> 
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a> 
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a> 
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a> 
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a> 

Где я должен поставить код предварительного загрузчика?

<div class="preloader-wrapper active"> 
<div class="spinner-layer spinner-red-only"> 
    <div class="circle-clipper left"> 
    <div class="circle"></div> 
    </div><div class="gap-patch"> 
    <div class="circle"></div> 
    </div><div class="circle-clipper right"> 
    <div class="circle"></div> 
    </div> 
</div> 

ссылка Preloader Код: http://materializecss.com/preloader.html

ссылка Carousel Код: http://materializecss.com/carousel.html

Спасибо и я надеюсь, что мой вопрос достаточно ясно.

Answer 1

JQuery делает это легко: https://api.jquery.com/load-event/

Сделать изображения невидимых с display:none в CSS, а затем использовать загрузчик JQuery для загрузки изображений:

<img src="book.png" alt="Book" id="book"> 

$("#book").load(function() { 
    // Handler for .load() called. 
}); 

и если загружены ваши изображения, вы установили изображения, видимые с помощью Javascript.

Например:

$("#book").load(function() { 
    $('#book').css('display', 'block'); 
});