在基础清算中加载图像时显示加载微调器

Question

我正在使用Foundation Clearing功能来显示图库。我最初只在页面上加载图像缩略图，但点击这些缩略图后，清除图像库就会打开。

但是大型图库图像需要一段时间才能加载。同时清空显示什么都没有。那么无论如何我还可以在图像尚未加载时显示加载通知。基金会清算中是否有任何内置功能可以做到这一点？

Answer 1

我不确定清算的加载通知，但基金会为Orbit提供div class="preloader"

的加载通知

也许你可以以某种方式破解它。

Answer 2

如果有人还在想 - 这里是如何在基金会5.5中做到这一点：

var spinDiv = document.getElementById('spinner');

$(document).on('open.fndtn.clearing', function() {
  spinDiv.style.display = 'block';
  alert('Pause so you can see the spinner');
});

$(document).on('opened.fndtn.clearing', function() {
  spinDiv.style.display = 'none';
});

http://codepen.io/anon/pen/OXXPyN