一个用jQuery创建的小型自定义加载覆盖插件。

我们都希望我们的用户在我们的网站上拥有尽可能好的体验。如果您正在开发一个包含大量繁重内容的复杂应用程序，那么当用户长时间观看加载的内容时，他们很容易感到沮丧。

使用此插件，您可以将自定义加载覆盖应用于任何DOM元素（Div、Image、video等）。这允许您的用户在后台加载内容时继续与页面交互和参与。当它加载后，您可以很容易地将其完全移除。

如何使用它:

1.加载样式表加载覆盖.jquery.css和JavaScript加载覆盖.jquery.js在文档中。

<link rel="stylesheet" href="/path/to/loading-overlay.jquery.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/loading-overlay.jquery.js"></script>

2.将加载覆盖应用于指定的图元。

<div class="example">
  ... any content here ...
</div>

3.将加载覆盖应用于指定的元素。

$('.example').loadingOverlay(true, {
  // options here
});

4.设置加载覆盖的背景颜色。

$('.example').loadingOverlay(true, {
  backgroundColor: 'rgba(255,255,255,0.85)',
});

5.覆盖默认加载指示器。

$('.example').loadingOverlay(true, {
  icon: '/path/to/loading/indicator/'
});

预览截图

jQuery 最小自定义加载覆盖插件