spinjs實現加載效果

最近作的一個項目是C#客戶端裏面包了html頁面，客戶端向後臺發送請求有可能費時較長，所以須要在服務器響應期間在頁面實現動態加載效果。
最開始基於安全考慮全部的前端請求都是走C#同步請求，這就帶來兩個問題
1.同步請求用時較長，致使頁面出現假死狀態，請求回來以前頁面渲染被阻塞
2.同步沒辦法使用加載效果，緣由是瀏覽器的渲染(UI)線程和js線程是互斥的，在執行js耗時操做時，頁面渲染會被阻塞掉。同步請求時，其餘的動做（ajax函數後面的代碼，還有渲染線程）都會中止下來。即便DOM操做語句是在發起請求的前一句，這個同步請求也會「迅速」將UI線 程阻塞，不給它執行的時間。在同步請求先後showLoading/hideLoading都沒辦法起做用。
爲了實現加載效果必須將同步請求改爲異步的。
官方網站：http://spin.js.org/

使用方法
第一步：引入js包<script type="text/javascript" src="js/spin.min.js" ></script>
第二步：須要在頁面定義一個菊花加載的背景，通常是個正方形的div做爲target

#loadingBox
{    
    margin:40px auto 5px;
    width:300px;
    height:300px;
    border-style: solid;
    border-width: 1px;
    border-color: #DF7401;
    background: #EFF5FB;
    text-align: center;
    line-height: 300px;
    color:#2E2EFE;
}

第三步：自定義花瓣的數量大小旋轉速度等參數

var opts = {
            //innerImage: {url: '../img/logo.png', width: 56, height: 56 }, //內部圖片            
            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
            position: 'relative', // element position
            progress: true,      // show progress tracker
            progressTop: 0,       // offset top for progress tracker
            progressLeft: 0       // offset left for progress tracker
        };

而後啓動加載效果

var spinner = new Spinner(opts);
var target = document.getElementById('loadingBox');
spinner.spin(target);

中止加載

spinner.spin();

完。