為大家分享一個 Ajax Loading —— spin.js

Rising_Sun發表於2013-11-15
JS

我們在做Ajax 非同步請求的時候，一般都會利用一個動態的 Gif 小圖片來製作一個Ajax Loading ，以便增加使用者體驗。

今天在網上發現了一個 Spin.js ，該 js 指令碼壓縮後5k，可以不用任何圖片，任何外部的CSS樣式，就可以建立一個Ajax Loading 指示器，且相容以下瀏覽器：

Spin.js 的線上設計、演示及下載地址為：http://fgnass.github.io/spin.js/

我們可以在連結頁面中，動態設定樣式同時會自動生成樣式的配置指令碼：

Spin.js 用法極其的簡單：

顯示 spinner

//target為顯示spiner的父容器
var target=document.getElementById("id")
spinner.spin(target);

隱藏 spinner
 spinner.spin();

我們來做一個簡單完整的例子，來體驗一次吧： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax Loading Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!--原版壓縮spin.js-->
    <script type="text/javascript" src="js/spin.min.js" ></script>   
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">        
        //opts 可從網站線上製作
        var opts = {            
            lines: 13, // 花瓣數目
            length: 20, // 花瓣長度
            width: 10, // 花瓣寬度
            radius: 30, // 花瓣距中心半徑
            corners: 1, // 花瓣圓滑度 (0-1)
            rotate: 0, // 花瓣旋轉角度
            direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
            color: '#5882FA', // 花瓣顏色
            speed: 1, // 花瓣旋轉速度
            trail: 60, // 花瓣旋轉時的拖影(百分比)
            shadow: false, // 花瓣是否顯示陰影
            hwaccel: false, //spinner 是否啟用硬體加速及高速旋轉            
            className: 'spinner', // spinner css 樣式名稱
            zIndex: 2e9, // spinner的z軸 (預設是2000000000)
            top: 'auto', // spinner 相對父容器Top定位 單位 px
            left: 'auto'// spinner 相對父容器Left定位 單位 px
        };

        var spinner = new Spinner(opts);

        $(document).ready(function () {
            $("#btnRequest").bind("click", function () {
                ajaxRequestData();
            })
        })
        
        function ajaxRequestData(){
            $.ajax({
                type: "POST",
                timeout: 10000,
                dataType: "text",
                url: "Index.ashx",
                beforeSend: function () {
                    //非同步請求時spinner出現
                    $("#firstDiv").text("");
                    var target = $("#firstDiv").get(0);
                    spinner.spin(target);                    
                },
                success: function (msg) {
                    $("#firstDiv").text(msg);
                    //關閉spinner  
                    spinner.spin();
                },
                error: function (e, jqxhr, settings, exception) {
                    $("#firstDiv").text("請求發生錯誤...");
                    //關閉spinner  
                    spinner.spin();
                }
            })
        }
    </script>
</head>
<body>
    <div id="firstDiv">
    </div>
    <div id="secondDiv">
        <input id="btnRequest" type="button" value="請求資料" class="btnStyle" />
    </div>
</body>
</html>

 點選“請求資料”按鈕，效果如下圖所示：

Spin.js 的擴充套件性也是很強的，可以下載其原始碼進行修改和擴充套件，這裡是Spin.js 的討論區 https://github.com/fgnass/spin.js/issues

比如可將Spin.js 擴充套件成中間顯示網站的logo，如下圖所示：

 程式碼十分的簡單，好了，話不多說，另外再給大家提供一個線上設計 ajax loading gif 的網址：http://www.ajaxload.info/

-==本文原始碼下載==- 

相關文章