[js開源組件開發]loading加載效果

loading加載效果

由於程序和網絡的原因，常常我們需要在交互的時候，給用戶一個正在加載中的動畫，於是，loading組件橫空出世。不需要復雜的代碼，也能完成大多數業務，這就是我做組件的原則。

效果如下圖：

這里演示了三種不一樣的效果.

1.loading效果顯示在按鈕自己身上，這是極好的

2.loading效果顯示在其他dom上，

3.loading全屏顯示，不明覺厲.

實例demo演示請點擊這里http://www.lovewebgames.com/jsmodule/loading.html

github托管源碼請點擊這里https://github.com/tianxiangbing/loading

 

調用示例

html:

<p>
    <input type="button" id="loading1" value="loading我自己">
    <input type="button" id="loading2" value="loading下面這個div">
    <input type="button" id="loading3" value="loading全屏">
</p>
<div id="loading-content" style="width:300px;height:200px;border:1px solid #ccc;background-color:#f2f2f2;">這是個內容的例子</div>
<script src="../src/jquery-1.11.2.js"></script>
<script src="../src/loading.js"></script>

 

js:

//loading我自己
$('#loading1').click(function(){
    var load = new Loading();
    load.init({
        target: this
    });
    load.start();
    setTimeout(function() {
        load.stop();
    }, 3000)
});
//loading下面這個div
$('#loading2').click(function(){
    var load = new Loading();
    load.init({
        target: "#loading-content"
    });
    load.start();
    setTimeout(function() {
        load.stop();
    }, 3000)
});
//loading全屏
$('#loading3').click(function(){
    var load = new Loading();
    load.init();
    load.start();
    setTimeout(function() {
        load.stop();
    }, 30000)
});

 

API

屬性

target:string||dom

需要顯示loading的節點，不傳值時顯示全屏的loading

 

方法

start:function()

開始loading

 

stop:function()

結束loading

 

事件

stop

target的stop事件觸發時，結束loading. 如
$('html').trigger('stop')會結束全屏的loading動畫.