LuLu UI pure版中文文档 » Loading加载

作为插件单独使用

loading效果支持以插件形式单独使用，引入下面CSS即可：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Loading.css">

如果想要使用loading增强功能，可以引入下面的JS文件（非必须）：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Loading.js"></script>

自定义loading元素

图形loading-内联

跟随文本-正常尺寸：

<ui-loading></ui-loading>

跟随文本-较大尺寸：

<ui-loading size="3"></ui-loading>

图形loading-块级

单行呈现-正常尺寸：

<ui-loading rows="5"></ui-loading>

单行呈现-较大尺寸：

<ui-loading rows="5" size="3"></ui-loading>

其中：

rows

表示 loading 提示元素的行数，和 <textarea> 元素相同，会有对应的高度表现，最大值是15。

如果我们想要手动设置 <ui-loading> 元素的高度，可以类似下面这样处理：

<ui-loading class="some-classname" rows="auto"></ui-loading>

.some-classname {
    height: 88px;
}

size

表示 loading 圈圈图形的大小。目前支持 size 范围是 1-4，默认值是2。

其中：

• size="1"对应宽高10px；
• size="2"或者不设置size属性对应宽高20px；
• size="3"对应宽高30px；
• size="4"对应宽高40px。

文本打点loading

正在加载中

<ui-dot></ui-dot>

图文loading并存

<ui-loading rows="5">正在加载中<ui-dot></ui-dot></ui-loading>

<ui-loading>元素在 IE9 浏览器下默认是静态的，没有动画。可以通过引入 Loading.js 使 IE9 浏览器也会有动画效果。

普通元素呈现loading

多用在使用 JavaScript 动态处理交互效果的场景下。

<div class="ui-loading" style="height: 100px;"></div>

普通元素的 loading 效果通过添加类名 .ui-loading实现。需要有指定的 height 高度值才有效果。支持简单的提示文本，例如：

<div class="ui-loading" style="height: 100px;">正在加载中<ui-dot></ui-dot></div>

如果引入 Loading.js，可以使用 element.loading = true 方法进行 loading 样式的添加，IE9 浏览器 loading 图标也会有旋转动画。

Loading效果JS增强

Loading.js 主要做了下面两件体验增强的事情：

1. 扩展了 loading 属性。可以设置按钮，或者其他元素为 loading 状态，可以取消 loading 状态，以及获取当前元素是否处于 loading 状态。
2. IE9浏览器下的 loading 图标也能不停地旋转。

设置按钮loading

点击我

button.addEventListener('click', function () {
    this.loading = true;
    // 一段时间后loading效果去除
    setTimeout(function () {
        this.loading = false;
    }.bind(this), 2000);
});

设置普通元素loading

例如下面这种“加载更多”按钮交互。

.loading-more-a {
    display: block;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    text-align: center;
    color: gray;
}

<a href="javascript:" class="loading-more-a" role="button">加载更多</a>

button.addEventListener('click', function () {
    this.loading = true;
});

实际开发，建议先清除按钮元素里面的文本内容，再执行 button.loading = true。

当然，我们也可以直接把子元素替换为 <ui-loading> 元素。例如：

button.addEventListener('click', function () {
    this.innerHTML = '<ui-loading></ui-loading>';
});

语法和参数

// 是否正在loading
var isLoading = element.loading
设置元素loading
element.loading = true;
// 取消loading效果
element.loading = false;

经测试，不会和浏览器 IMG 元素和 IFRAME 元素的原生loading属性相冲突。

Loading实例方法

Loading.js 中还包含了 Loading 实例方法。

语法和参数

var myLoading = new Loading(element, options);

其中：

element

必需。Element元素或者String选择器字符串。表示需要显示 loading 效果的元素或者容器元素。

options

可选。Object 纯对象。支持的可选参数参见下表：

使用案例

例如上面直接把子元素替换为 <ui-loading>元素的案例。可以使用 new Loading() 构造方法：

button.addEventListener('click', function () {
    new Loading(this);
    // loading完成后执行
    this.data.loading.hide();
});

或者下面的语法：

button.addEventListener('click', function () {
    var myLoading = new Loading(this);
    // loading完成后执行
    myLoading.hide();
});

其中，hide() 方法不仅可以隐藏 <ui-loading> 元素，还可以把初始 HTML 还原。

实例对象

myLoading就是返回的实例对象，暴露了以下属性和方法：

{
    // 提示内容显示与否，true或者false
    display: false,
    loading: false,
    // 暴露的元素们
    element: {
        // loading元素或者loading元素的容器
        // 由observer参数决定
        target: null
    },
    params: {
        // loading触发源自哪里，另外参数'attributes'
        observer: 'childList',
        // loading图形尺寸
        size: 2
    },
    // loading元素显示
    show: function () {},
    // loading元素隐藏
    hide: function () {}
}