使用 jQuery 的简单灵活的加载覆盖插件 - loadingoverlay.js

版本:

浏览量:2188

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

loadingoverlay.js 是一个简单、灵活的 jQuery 插件，它显示了一个高度可定制的加载覆盖和自定义微调器，同时在特定容器中加载一些数据。您可以在官方文档页面中找到高级示例。

基本用法：

1. 在网页上同时包含 jQuery 库和 jQuery loadingoverlay.js 脚本。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="loadingoverlay.min.js"></script>

2. 显示全屏加载覆盖覆盖整个页面的 JavaScript。

$.LoadingOverlay("show");

3. 在指定元素上显示全屏加载覆盖的 JavaScript。

$(".container").LoadingOverlay("show");

4. 隐藏加载覆盖。

$.LoadingOverlay("hide");
$(".container").LoadingOverlay("hide");

5. 所有默认自定义选项。

$(".container").LoadingOverlay("show", {
 
  // Background
  background              : "rgba(255, 255, 255, 0.8)",
  backgroundClass         : "",
  // Image
  image                   : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iNTAwIiBjeT0iOTAiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjUwMCIgY3k9IjkxMCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iOTAiIGN5PSI1MDAiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjkxMCIgY3k9IjUwMCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iMjEyIiBjeT0iMjEyIi8+PGVsbGlwc2Ugcng9IjgwIiByeT0iODAiIGN4PSI3ODgiIGN5PSIyMTIiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjIxMiIgY3k9Ijc4OCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iNzg4IiBjeT0iNzg4Ii8+PC9zdmc+",
  image<a href="https://www.jqueryscript.net/animation/">Animation</a>          : "2000ms rotate_right",
  imageAutoResize         : true,
  imageResizeFactor       : 1,
  imageColor              : "#202020",
  imageClass              : "",
  imageOrder              : 1,
  // Font Awesome
  fontawesome             : "",
  fontawesomeAutoResize   : true,
  fontawesomeResizeFactor : 1,
  fontawesomeColor        : "#202020",
  fontawesomeOrder        : 2,
  // Custom
  custom                  : "",
  customAnimation         : false,
  customAutoResize        : true,
  customResizeFactor      : 1,
  customOrder             : 3,
  // Text
  text                    : "",
  textAnimation           : false,
  textAutoResize          : true,
  textResizeFactor        : 0.5,
  textColor               : "#202020",
  textClass               : "",
  textOrder               : 4,
  // Progress
  progress                : false,
  progressAutoResize      : true,
  progressResizeFactor    : 0.25,
  progressColor           : "#a0a0a0",
  progressClass           : "",
  progressOrder           : 5,
  progressFixedPosition   : "",
  progressSpeed           : 200,
  progressMin             : 0,
  progressMax             : 100,
  // Sizing
  size                    : 50,
  maxSize                 : 120,
  minSize                 : 20,
  // Misc
  direction               : "column",
  fade                    : [400, 200],
  resizeInterval          : 50,
  zIndex                  : 2147483647
 
});

变更日志：

v2.1.7 (2020-03-21)

修正：当使用单个 jQuery 选择器应用于多个目标元素时，会影响设置和特定大小的错误

v2.1.6 (2018-09-24)

Fixed: Corner case when LoadingOverlay was being hidden with a long fade out time after the target element was resized and before resizeInterval was triggered

v2.1.5 (2018-06-08)

Fixed: Toggle LoadingOverlay visibility according to target element
Fixed: Clear orphaned intervals when target element is arbitrary removed from DOM

v2.1.4 (2018-06-08)

Replaced the .load() method with a custom ajax() request to load external SVG images in order to prevent conflicts with ajaxStart() and ajaxSend() event handlers

v2.1.3 (2018-05-04)

package.json main path fix

v2.1.2 (2018-04-26)

Fixed a bug introduced in v2.1.1 causing multiple LoadingOverlays to be shown on a single element

v2.1.1 (2018-04-22)

Gracefully hides when target element is arbitrary removed from DOM

v2.1.0 (2018-04-05)

Added Resize action
Added progressFixedPosition option
Added Control over both SVG fill and stroke colors through imageColor option passed as two-elements array
Changed Default SVG image uses circle elements instead of ellipse ones

v2.0.2 (2018-03-21)

Using getBoundingClientRect() instead of jQuery .position() when LoadingOverlay is displayed on an element with position : fixed

v2.0.1 (2018-03-17)

Changed value for overlay justify-content CSS property from space-evenly to space-around: Edge didn't like the former
Set explicit width and height for SVG, addressing bug in Chrome

v2 (2018-03-16)

Added support for text element
Order option for every element
Resize factor option for every element
`size` is expressed in percentage. Use a string with units (ie. 100px) to force a fixed size.
`maxSize` and `minSize` are always assumed a percentages
Set `size` option to `false` to disable elements resizing and rely only on classes
Container's position fix
Supports inline SVG.
FontAwesome SVG with JS support

v1.6.0 (2018-02-11)

AMD and CommonJS support
Typings for TypeScript
Extra Progress: it is possible to disable shown text

v1.5.5 (2017-12-26)

Add AMD, CommonJS and Plain Browser Support

v1.5.4 (2017-09-29)

Option zIndex defaults to the highests value allowed (2147483647) to prevent other elements to be displayed over LoadingOverlay

v1.5.3 (2017-01-28)

CSS positioning problem with Extra Progress when used with Font Awesome
Option zIndex defaults to 9999

v1.4.1 (2016-08-05)

Fixed a bug with positioning when LoadingOverlay is attached to an element (element overlay mode).
LoadingOverlay is now always attached to the body, even if it is an element overlay. This means you can safely remove all the container element’s contents while the LoadingOverlay is being shown. At the same time it shouldn’t break anything in your existing code, unless you were doing something really tricky with it.
The resizeInterval option is now active and set to 50 milliseconds by default. This makes more sense as a default value since one would activate it more often than not.