LuLu UI pure版中文文档 »

Fork Me

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纯对象。支持的可选参数参见下表:
参数名称 支持类型 默认值 释义
observer String 'childList' 观察loading显示与隐藏的变动对象。支持参数值为'childList''attributes'

'attributes'指通过HTML属性变化显示loading,底层使用自定义的element.loading属性,通过改变元素的class类属性实现loading效果控制,适用于按钮等元素。不过对于按钮等元素,使用new Loading()构造太重了,建议直接使用loading属性进行控制。

'childList'指通过子元素列表变化显示loading。会自动清空element所有子元素,然后替换成<ui-loading>元素呈现loading效果。

size Number 2 loading图形的尺寸大小,支持范围1-4,每一号尺寸对应10px

使用案例

例如上面直接把子元素替换为<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 () {}
}
本页贡献者:

zhangxinxu