html - Materialise 预加载器

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 加载器加载图像:

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

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

如果您的图像已加载，您可以使用 Javascript 将图像设置为可见。

例如:

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