📌  相关文章
📜  loadingoverlay (1)

📅  最后修改于: 2023-12-03 15:02:46.120000             🧑  作者: Mango

LoadingOverlay

简介

LoadingOverlay 是一款轻量级的 jQuery 插件，用于在页面上方覆盖一层透明的加载动画，以使用户了解页面正在加载中。此插件可以为任何页面或元素添加全屏或局部加载动画，并支持各种选项和回调函数。

安装

在您的项目中使用 LoadingOverlay，您需要将它与 jQuery 一起引入到您的 HTML 页面中。可以从以下地址下载最新版本：

  1. jQuery
  2. LoadingOverlay

引入 jQuery 和 LoadingOverlay：

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="path/to/loadingoverlay.min.js"></script>
</head>
用法
基本使用

要在元素上添加 LoadingOverlay，只需调用 $.LoadingOverlay() 方法即可。例如，在 #myDiv 元素上添加 LoadingOverlay：

$('#myDiv').LoadingOverlay();

此时会在 #myDiv 上添加全屏的加载动画。

自定义选项

您可以使用选项对象来自定义 LoadingOverlay 的行为。有关可用选项的完整列表，可以查看 文档。

$('#myDiv').LoadingOverlay({
  color: "#f1c40f",
  image: "",
  fontawesome: "fa fa-refresh fa-spin",
  size: "5em",
  zIndex: 2000,
});
局部覆盖

您可以选择将 LoadingOverlay 限制在某个元素上，而不是覆盖整个页面。通过设置 overlayCSS 选项来实现。

例如，在 #myDiv 元素上添加 LoadingOverlay：

$('#myDiv').LoadingOverlay("show", {
  color: "#f1c40f",
  image: "",
  fontawesome: "fa fa-refresh fa-spin",
  size: "5em",
  zIndex: 2000,
  overlayCSS: {backgroundColor: "#000"}
});
回调函数

在 LoadingOverlay 的生命周期中，您可以通过回调函数来执行一些操作。以下是 LoadingOverlay 支持的回调函数列表：

$('#myDiv').LoadingOverlay({
  onStartLoading: function() {
    console.log('加载开始了！');
  },
  onEndLoading: function() {
    console.log('加载结束了！');
  },
  onBeforeLoad: function() {
    console.log('准备加载中……');
  },
  onAfterLoad: function() {
    console.log('加载完成了！');
  }
});
结论

LoadingOverlay 是一款灵活、易于使用且高度可定制的 jQuery 插件。它可以帮助用户更好地了解页面中的加载进度，同时可以优化用户体验。在安装和使用 LoadingOverlay 时，建议您查看文档，以了解更多关于此插件的选项和用法信息。