我是网页设计的新手,我发现了 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
谢谢,我希望我的问题足够清楚。
最佳答案
JQuery 让这变得简单: https://api.jquery.com/load-event/
在 CSS 中使用 display:none
使图像不可见,然后使用 JQuery 加载器加载图像:
<img src="book.png" alt="Book" id="book">
$( "#book" ).load(function() {
// Handler for .load() called.
});
如果您的图像已加载,您可以使用 Javascript 将图像设置为可见。
例如:
$( "#book" ).load(function() {
$('#book').css('display', 'block');
});
关于html - Materialise 预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38722678/