lyear.loading加载

jquery.lyear.loading.js插件是我在做光年v4版本时候，自己根据使用情况做的一个loading加载动画插件，可以采用css loading动画或者图片，并且设置loading文字。当然里面的一些定位的计算参考了网上的开源项目。

![](/uploads/images/20220105/0bbc66db4cec189595ac4af5d14e4552.png)

整体使用情况：
```javascript
$('#test-btn').click(function() {
    var l = $('body').lyearloading({
        eleObj            : null,
        opacity           : 0.1,              // 遮罩层透明度，为0时不透明
        backgroundColor   : '#ccc',           // 遮罩层背景色
        imgUrl            : '',               // 使用图片时的图片地址
        textColorClass    : 'text-success',   // 文本文字的颜色
        spinnerColorClass : 'text-success',   // 加载动画的颜色(不使用图片时有效)
        spinnerSize       : 'lg',             // 加载动画的大小(不使用图片时有效，示例：sm/nm/md/lg，也可自定义大小，如：25px)
        spinnerText       : '加载中...',       // 文本文字    
        zindex            : 9999,             // 元素的堆叠顺序值
    });
    setTimeout(function() {
        l.hide();
    }, 500000)
});
```

#### 按钮中的loading
```javascript
$('#example-one').click(function(){
    var l = $(this).lyearloading({
        opacity: 0.2,
        spinnerSize: 'nm'
    });
});
```

#### 基于整个body的loading
```javascript
var l = $('body').lyearloading({
    opacity: 0.2,
    spinnerSize: 'lg'
});
```

#### 使用文字和颜色
```javascript
var l = $('body').lyearloading({
    opacity: 0.2,
    spinnerSize: 'lg',
    spinnerText: '后台处理中，请稍后...',
    textColorClass: 'text-info',
    spinnerColorClass: 'text-info'
});
```

#### 使用图片
```javascript
var l = $('body').lyearloading({
    opacity: 0.6,
    backgroundColor: '#ffffff',
    imgUrl: 'http://www.bixiaguangnian.com/home/images/loader.gif',
    spinnerText: '后台处理中，请稍后...',
    textColorClass: 'text-info'
});
```

#### 指定div元素中的loading
```javascript
var l = $('#login-form').lyearloading({
    opacity: 0.2,
    spinnerSize: 'lg'
});
```

已经使用的loading，在结束后记得销毁，以免出现问题。
```javascript
l.destroy();
```

同样，你如果想在v3中使用，同样没有问题。示例页面上的css不用管。

#### 在父页面引入，子页面调用

有的小伙伴可能会在iframe版本的父页面中引入该js，想要在子页面的时候能调用。

如果单纯的这样使用 `parent.$('#idname').lyearloading();` 会有一个问题，因为这样的写法，jquery会自动去父页面找 `id="idname"` 的元素，这时候你的元素其实是在子页面里面的，所以会提示有错误，当然你如果使用的是 `body` 就没有这个问题了。

这里我们增加了一个新的参数，在调用的时候如下使用：

```javascript
var l = window.parent.$().lyearloading({
    eleObj: $('#exampleModal'),
    opacity: 0.2,
    spinnerSize: 'nm'
});
```

> 如果指定loading是在某一个元素上，使用parent的时候，不再指定获取的是哪一个元素对象，而是将当前的元素对象传递给插件（`eleObj: $('#exampleModal')`）。

插件项目中页面名字：`test_loading.html` `test_loading_v4.html`

[点击查看 loading加载插件 在线演示](http://example.itshubao.com/example/100.html "点击查看 loading加载插件 在线演示")

涉及的文件：
- `js/jquery.lyear.loading.js`