实现预载器

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'); 
});