spinjs實現加載效果

snifes 發布于2019-08-20 18:17 / 2853人閱讀

摘要：最近做的一個項目是客戶端里面包了頁面，客戶端向后臺發送請求有可能費時較長，因此需要在服務器響應期間在頁面實現動態加載效果。為了實現加載效果必須將同步請求改成異步的。

最近做的一個項目是C#客戶端里面包了html頁面，客戶端向后臺發送請求有可能費時較長，因此需要在服務器響應期間在頁面實現動態加載效果。
最開始基于安全考慮所有的前端請求都是走C#同步請求，這就帶來兩個問題
1.同步請求用時較長，導致頁面出現假死狀態，請求回來之前頁面渲染被阻塞
2.同步沒辦法使用加載效果，原因是瀏覽器的渲染(UI)線程和js線程是互斥的，在執行js耗時操作時，頁面渲染會被阻塞掉。同步請求時，其他的動作（ajax函數后面的代碼，還有渲染線程）都會停止下來。即使DOM操作語句是在發起請求的前一句，這個同步請求也會“迅速”將UI線程阻塞，不給它執行的時間。在同步請求前后showLoading/hideLoading都沒辦法起作用。
為了實現加載效果必須將同步請求改成異步的。
官方網站：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;
}

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

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();

完。

云服務器 GPU云服務器加載loading效果 js數據加載效果 php下拉加載效果 html加載動態效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84301.html

看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

Vixb 2019-08-30 14:06 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

zhou_you 2019-08-22 15:13 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

xingpingz 2019-08-01 18:40 評論0 收藏0
解耦圖片加載庫

摘要：但是當我們需要更換圖片加載庫時，卻發現這是一項艱巨的任務。高斯模糊效果是一個很耗性能的一個操作，很容易引起，所以在使用時應將盡可能的縮小，同時選擇一個穩定的實現方式。在APP開發過程，圖片加載是一個不可或缺的模塊，一般我們都會使用比較成熟的開源庫，如Fresco, ImageLoader, Glide等。這些開源庫也都提供了簡潔的使用方式，使我們可以快速完成圖片的加載過程。但是當我...

newtrek 2019-08-16 11:01 評論0 收藏0