資訊專欄INFORMATION COLUMN
摘要：最近做的一個(gè)項(xiàng)目是客戶端里面包了頁面，客戶端向后臺(tái)發(fā)送請(qǐng)求有可能費(fèi)時(shí)較長(zhǎng)，因此需要在服務(wù)器響應(yīng)期間在頁面實(shí)現(xiàn)動(dòng)態(tài)加載效果。為了實(shí)現(xiàn)加載效果必須將同步請(qǐng)求改成異步的。
最近做的一個(gè)項(xiàng)目是C#客戶端里面包了html頁面，客戶端向后臺(tái)發(fā)送請(qǐng)求有可能費(fèi)時(shí)較長(zhǎng)，因此需要在服務(wù)器響應(yīng)期間在頁面實(shí)現(xiàn)動(dòng)態(tài)加載效果。
最開始基于安全考慮所有的前端請(qǐng)求都是走C#同步請(qǐng)求，這就帶來兩個(gè)問題
1.同步請(qǐng)求用時(shí)較長(zhǎng)，導(dǎo)致頁面出現(xiàn)假死狀態(tài)，請(qǐng)求回來之前頁面渲染被阻塞
2.同步?jīng)]辦法使用加載效果，原因是瀏覽器的渲染(UI)線程和js線程是互斥的，在執(zhí)行js耗時(shí)操作時(shí)，頁面渲染會(huì)被阻塞掉。同步請(qǐng)求時(shí)，其他的動(dòng)作（ajax函數(shù)后面的代碼，還有渲染線程）都會(huì)停止下來。即使DOM操作語句是在發(fā)起請(qǐng)求的前一句，這個(gè)同步請(qǐng)求也會(huì)“迅速”將UI線 程阻塞，不給它執(zhí)行的時(shí)間。在同步請(qǐng)求前后showLoading/hideLoading都沒辦法起作用。
為了實(shí)現(xiàn)加載效果必須將同步請(qǐng)求改成異步的。
官方網(wǎng)站：http://spin.js.org/
使用方法
第一步：引入js包
第二步：需要在頁面定義一個(gè)菊花加載的背景，一般是個(gè)正方形的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, // 花瓣長(zhǎng)度
width: 10, // 花瓣寬度
radius: 30, // 花瓣距中心半徑
corners: 1, // 花瓣圓滑度 (0-1)
rotate: 0, // 花瓣旋轉(zhuǎn)角度
direction: 1, // 花瓣旋轉(zhuǎn)方向 1: 順時(shí)針, -1: 逆時(shí)針
color: "#5882FA", // 花瓣顏色
speed: 1, // 花瓣旋轉(zhuǎn)速度
trail: 60, // 花瓣旋轉(zhuǎn)時(shí)的拖影(百分比)
shadow: false, // 花瓣是否顯示陰影
hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉(zhuǎn)
className: "spinner", // spinner css 樣式名稱
zIndex: 2e9, // spinner的z軸 (默認(rèn)是2000000000)
top: "auto", // spinner 相對(duì)父容器Top定位 單位 px
left: "auto", // spinner 相對(duì)父容器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
};
然后啟動(dòng)加載效果
var spinner = new Spinner(opts);
var target = document.getElementById("loadingBox");
spinner.spin(target);
停止加載
spinner.spin();
完。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84301.html
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對(duì) image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對(duì) image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對(duì) image 懶加載組件。多...
摘要：但是當(dāng)我們需要更換圖片加載庫時(shí)，卻發(fā)現(xiàn)這是一項(xiàng)艱巨的任務(wù)。高斯模糊效果是一個(gè)很耗性能的一個(gè)操作，很容易引起，所以在使用時(shí)應(yīng)將盡可能的縮小，同時(shí)選擇一個(gè)穩(wěn)定的實(shí)現(xiàn)方式。 在APP開發(fā)過程，圖片加載是一個(gè)不可或缺的模塊，一般我們都會(huì)使用比較成熟的開源庫，如Fresco, ImageLoader, Glide等。 這些開源庫也都提供了簡(jiǎn)潔的使用方式，使我們可以快速完成圖片的加載過程。但是當(dāng)我...
閱讀 3337·2021-11-22 12:04
閱讀 2721·2019-08-29 13:49
閱讀 493·2019-08-26 13:45
閱讀 2256·2019-08-26 11:56
閱讀 1012·2019-08-26 11:43
閱讀 605·2019-08-26 10:45
閱讀 1279·2019-08-23 16:48
閱讀 2167·2019-08-23 16:07
