物化预加载器答案

【问题标题】：Materialize Preloader物化预加载器
【发布时间】：2016-08-02 14:03:34
【问题描述】：

我是网页设计的新手，我发现了 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

谢谢，我希望我的问题足够清楚。

【问题讨论】：

我假设您希望预加载器在图像加载时显示然后消失？在这种情况下，您将预加载器放在轮播上方（您可以在相对定位的包装器和 z-index 内使用绝对定位），使用 javascript 处理图像加载，当所有图像加载后，您从 DOM 中删除 preloader-wrapper 元素。

标签： html css materialize

【解决方案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');
});

【讨论】：