實現預載器

Question

我是新來的網頁設計，我發現MaterializeCSS框架（與Bootstrap相同的目的）。

所以我找到了預裝載器的代碼，但不幸的是我不知道把它放在哪裏。

我希望這個循環加載程序在加載傳送帶時出現。這是我的旋轉木馬代碼：

<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> 

預加載代碼的鏈接： http://materializecss.com/preloader.html

的旋轉木馬代碼鏈接： http://materializecss.com/carousel.html

謝謝，我希望我的問題是非常明顯的。

Answer 1

jQuery讓這個簡單： https://api.jquery.com/load-event/

讓看不見的圖像在CSS display:none，然後使用JQuery的加載器加載圖片：

​​

，如果你的圖像加載，您可以設置用Javascript可見的圖像。

例如：

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