Loading - demo

前言

由于找不到一款完全符合自己需求的web-loading组件，没办法自己动手写一个得了，拓展jQuery插件，封装为layui组件。
因时间短，组件及文档可能不是很完美，大家觉得有用就用用，有问题可以邮件给我：neusofts#neusofts.com（#换成@，一直没注意，之前留的邮箱少了一个s，晕）

版本更新：

v2.0（未来版本）
- 待新增：自定义div对象（CSS3场景）；
- 待处理：因img预加载导致loading显示延迟的问题；

v1.3（最新版）
- 修复：父节点移除后导致loading实例报错的bug；
- 修复：afterHideAll默认覆盖全局配置，以最后调用为基准；
- 增强：img和text样式初始化设置；
- 新增：inheritRadius参数，是否继承父节点边框的值；
- 新增：文档的几个示例；

v1.2
- 新增：title配置，自定义div、img、text的hover显示内容；
- 修复：resize方法的处理逻辑及性能；
- 修复：有无img、text场景下的坐标计算错误bug；
- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；

v1.1
- 更新：某些场景下loading计算坐标错误的bug；
- 更新：无img时text加载延迟的bug；
- 兼容：safari的position计算方法不规范导致的bug；
- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；

v1.0
- 发布：组件发布

查看文档

Loading组件之自定义配置及演示（兼容IE8+）

遮罩层

有无遮罩层

注：opacity为0时无遮罩层标签

遮罩背景色

遮罩class名

遮罩透明度

注：opacity为0时无遮罩层

边框继承

注：自定义遮罩层是否继承父节点的边框效果，默认false

图片

图片class名

备选图片

注：默认编码为0，为null时无图片，可自定义图片路径

图片路径

注：默认备选编号为0，值为null时无图片，推荐：https://loading.io，不考虑IE可使用svg格式文件

文本

显示文本

文本Css

注：默认为空，格式{color: '#000'}

文本class名

回调

回调函数

注：“隐藏后”的回调同样对“销毁”有效（全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）

其它

单击关闭

注：单击关闭loading，遮罩、图片、文本均有效（一般配合回调使用）

Top偏移量

注：默认为0，自定义图片、文本的top偏移量（针对图片和文本同时显示且两者绝对居中的微调场景）

hover提示

注：默认为空字符串，自定义div、img、text的hover提示

动画时长

注：默认为600，为0时关闭动画效果

遮罩z-index

注：默认为19999999（1,000,000），同时imgZIndex = overlayZIndex + 1

生成配置

自定义配置 / 默认预览区

正在生成自定义配置...

全局配置及使用文档

$(element).loading();        // 此方式 “仅调用show方法”
$(element).loading({ ... }); // 重要提示：此方式会更新 “全局配置 + 执行show方法”

// 配置说明
options = {
    overlayClassName: ''            // 类型String，自定义遮罩层className，可多个，默认空String
    , imgClassName: ''              // 类型String，自定义image的className，可多个，默认空String
    , background: '#fff'            // 类型String，自定义遮罩层背景色，默认#fff
    , opacity: 0.6                  // 类型Number，自定义遮罩层的透明度，默认0.6，注：为0时无遮罩层
    , text: ''                      // 类型String，自定义loading文本，默认空String，注：非空时参考offsetTop设置
    , textCss: {}                   // 类型Object，自定义loading文本样式，默认空{}
    , textClassName: ''             // 类型String，自定义文本的className，可多个，默认空String
    , title: ''                     // 类型String，自定义div、img、text的title，默认空String
    , offsetTop: 0                  // 类型Number，自定义图片+文本模式的top偏移量，注：text为空时无需设置offsetTop
    , imgSrc: 0                     // 类型String|null|Number，自定义loading图片，默认为图片序列的0索引（共0-10），可自定义url路径，注：为null时无图片
    , beforeShow: function () {}    // 类型Function，自定义loading显示前的回调，默认空Function，参数1=this，参数2=jQuery
    , afterShow: function () {}     // 类型Function，自定义loading显示后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading
    , imgZIndex: 19999999+1         // 类型Number，自定义图片的z-index值，默认19999999+1
    , overlayZIndex: 19999999       // 类型Number，自定义遮罩层的z-index值，默认19999999
    , afterHide: function () {}     // 类型Function，自定义loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
    , afterHideAll: function () {}  // 类型Function，自定义全部loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
    , animateTime: 600              // 类型Number，自定义loading显示/隐藏的动画时长，默认600毫秒，注：为0时无动画
    , clickHide: false              // 类型Boolean，自定义单击loading遮罩层/图片/文字是否隐藏loading，默认false
    , inheritRadius: false          // 类型Boolean，自定义遮罩层是否继承父节点的边框效果，默认false
}

回调

beforeShow
afterShow
afterHide
afterHideAll

// loading显示之前的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    beforeShow: function (loading, $obj) {
        // loading == this;
        // $obj == $(element);
        // 回调内容
    }
});

// loading显示之后的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterShow: function (loading, $obj, $loading) {
        // loading == this;
        // $obj == $(element);
        // $loading == $(div,img,text);
        // 回调内容
    }
});

// loading隐藏之后的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterHide: function (loading, $obj, $loading?) {
        // loading == this;
        // $obj == $(element);
        // $loading? == $(div,img,text); 销毁时无此参数
        // 回调内容
    }
});

// loading全部隐藏之后的回调（注：全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterHideAll: function (loading, $obj, $loading?) {
        // loading == this;
        // $obj == $(element);
        // $loading? == $(div,img,text); 全部销毁时无此参数
        // 回调内容
    }
});

方法

show()
toggle()
hide()
hideAll()
destroy()
destroyAll()

/*
- 可以直接jQuery对象调用，也可以创建一个loading对象，以备用；
- 注：如果是jQuery对象数组，则返回的loading也是对应的对象数组；
- 注：若jQuery数组中包含body，则默认只对body有效（body最好单独调用）；
- 注：destroy/destroyAll后loading对象仍可调用show等方法；
- 更详尽的说明，请查看源码中的注释；
*/

// show（loading.show()不支持链式调用）
var loading = $(element).loading('show', { /* 私有配置 */ });

// hide <--> show
$(element).loading('toggle');

// 或者
loading.toggle(); // 支持链式调用

// hide
$(element).loading('hide');

// 或者
loading.hide(); // 支持链式调用

// hideAll
$(element).loading('hideAll');

// 或者
loading.hideAll(); // 支持链式调用

// destroy（注：为避免切换页面兼容性，配合onload的loading隐藏建议使用destroy注销对象）
$(element).loading('destroy');

// 或者
loading.destroy(); // 支持链式调用

// destroyAll
$(element).loading('destroyAll');

// 或者
loading.destroyAll(); // 支持链式调用

事件

show
hide
hideAll
destroy
destroyAll

$(element).on('lay-loading.show', function (event, loadingObj) {
    // 监听show事件的回调
});

$(element).on('lay-loading.hide', function (event, loadingObj) {
    // 监听hide事件的回调
});

$(element).on('lay-loading.hideAll', function (event, loadingObj) {
    // 监听hideAll事件的回调
});

$(element).on('lay-loading.destroy', function (event, loadingObj) {
    // 监听destroy事件的回调
});

$(element).on('lay-loading.destroyAll', function (event, loadingObj) {
    // 监听destroyAll事件的回调
});