資訊專欄INFORMATION COLUMN
摘要：最近做的一個項目是客戶端里面包了頁面，客戶端向后臺發(fā)送請求有可能費時較長，因此需要在服務(wù)器響應(yīng)期間在頁面實現(xiàn)動態(tài)加載效果。為了實現(xiàn)加載效果必須將同步請求改成異步的。
最近做的一個項目是C#客戶端里面包了html頁面，客戶端向后臺發(fā)送請求有可能費時較長，因此需要在服務(wù)器響應(yīng)期間在頁面實現(xiàn)動態(tài)加載效果。
最開始基于安全考慮所有的前端請求都是走C#同步請求，這就帶來兩個問題
1.同步請求用時較長，導(dǎo)致頁面出現(xiàn)假死狀態(tài)，請求回來之前頁面渲染被阻塞
2.同步?jīng)]辦法使用加載效果，原因是瀏覽器的渲染(UI)線程和js線程是互斥的，在執(zhí)行js耗時操作時，頁面渲染會被阻塞掉。同步請求時，其他的動作（ajax函數(shù)后面的代碼，還有渲染線程）都會停止下來。即使DOM操作語句是在發(fā)起請求的前一句，這個同步請求也會“迅速”將UI線 程阻塞，不給它執(zhí)行的時間。在同步請求前后showLoading/hideLoading都沒辦法起作用。
為了實現(xiàn)加載效果必須將同步請求改成異步的。
官方網(wǎng)站：http://spin.js.org/
使用方法
第一步：引入js包
第二步：需要在頁面定義一個菊花加載的背景，一般是個正方形的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;
}
第三步：自定義花瓣的數(shù)量大小旋轉(zhuǎn)速度等參數(shù)
var opts = {
//innerImage: {url: "../img/logo.png", width: 56, height: 56 }, //內(nèi)部圖片
lines: 13, // 花瓣數(shù)目
length: 20, // 花瓣長度
width: 10, // 花瓣寬度
radius: 30, // 花瓣距中心半徑
corners: 1, // 花瓣圓滑度 (0-1)
rotate: 0, // 花瓣旋轉(zhuǎn)角度
direction: 1, // 花瓣旋轉(zhuǎn)方向 1: 順時針, -1: 逆時針
color: "#5882FA", // 花瓣顏色
speed: 1, // 花瓣旋轉(zhuǎn)速度
trail: 60, // 花瓣旋轉(zhuǎn)時的拖影(百分比)
shadow: false, // 花瓣是否顯示陰影
hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉(zhuǎn)
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();
完。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84301.html
摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標題----為什么我要寫這個 react 插件 圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點： 沒有只針對 image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標題----為什么我要寫這個 react 插件 圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點： 沒有只針對 image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標題----為什么我要寫這個 react 插件 圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點： 沒有只針對 image 懶加載組件。多...
閱讀 3385·2021-11-22 12:04
閱讀 2771·2019-08-29 13:49
閱讀 534·2019-08-26 13:45
閱讀 2322·2019-08-26 11:56
閱讀 1070·2019-08-26 11:43
閱讀 648·2019-08-26 10:45
閱讀 1330·2019-08-23 16:48
閱讀 2231·2019-08-23 16:07
