layui 實(shí)現(xiàn)加載動(dòng)畫以及非真實(shí)加載進(jìn)度的方法
近期在做一個(gè)網(wǎng)站的查詢功能,但是由于數(shù)據(jù)量確實(shí)太大,分頁(yè)查詢后也是很慢,同時(shí)查詢出的數(shù)據(jù)部分還要進(jìn)行一些處理,導(dǎo)致用戶說(shuō)要我們給他們加一個(gè)查詢進(jìn)度,要百分比顯示。加上加載動(dòng)畫很簡(jiǎn)單,layui有現(xiàn)成的。但是還要?jiǎng)赢嫛?。我tm(手動(dòng)微笑),原諒我水平比較低。然后就瞎搞,終于搞出了一個(gè)加載的進(jìn)度,雖然還是假的。。。
上面廢話有點(diǎn)多,直接切入正題。
首先是html代碼。。。。。(不存在的2333333........)
然后是js代碼:
//這里是必須要有的,_index的作用是用來(lái)關(guān)閉遮罩,詳細(xì)看layui的文檔
var _index;
var _lp_baseTime = 0;
var _lp_startTime = 0;
function updateLoadProgress() {
if (_lp_baseTime < 0) {
layer.close(_index);
return;
}
var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
var timeDifference = (dval / _lp_baseTime).toFixed(2);
var lp = timeDifference < 1 ? timeDifference * 100 : 99;
$("#loadProgress").html(parseInt(lp));
setTimeout(function () { updateLoadProgress(); return; }, 650);
}
function 你的函數(shù)(){
$.ajax({
url:url,
async:true,
data:{},
beforeSend:function(){
//敲黑板
_index = layer.load(1, {
content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查詢(<span id='loadProgress' >0</span>%)</div>",
shade: [0.5, '#000']
});
//這里是預(yù)估的時(shí)間,因?yàn)檎麄€(gè)進(jìn)度都是根據(jù)消耗時(shí)間計(jì)算的 = =
//這里的start,end,stns都是原始項(xiàng)目里帶的。這個(gè)的作用是計(jì)算要等待的時(shí)長(zhǎng)的,可以給一個(gè)固定值或者其他的東西公式,保證結(jié)果是正整數(shù),單位是毫秒即可。
_lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
_lp_startTime = new Date().valueOf();
setTimeout(function () { updateLoadProgress(); return; }, 60);
},
success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
error:function(){
_lp_baseTime = -1;
layer.close(_index);
}
});
}
OK,就是這么多,主要是利用預(yù)估的時(shí)間與現(xiàn)在已進(jìn)行時(shí)間進(jìn)行預(yù)估做比較,所以實(shí)際使用的時(shí)候還要進(jìn)行一定程度的調(diào)整,但是,最起碼也是個(gè)思路是不是233333,參考一下吧
超過(guò)時(shí)間時(shí)進(jìn)度會(huì)定格在99%,所以,emmmm....注意預(yù)留一些時(shí)間
以上這篇layui 實(shí)現(xiàn)加載動(dòng)畫以及非真實(shí)加載進(jìn)度的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼
- layui table動(dòng)態(tài)表頭 改變表格頭部 重新加載表格的方法
- 解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題
- Layui table field初始化加載時(shí)進(jìn)行隱藏的方法
- Layui彈出層 加載 做編輯頁(yè)面的方法
- layui異步加載table表中某一列數(shù)據(jù)的例子
- layui form表單提交之后重新加載數(shù)據(jù)表格的方法
- layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子
- layui動(dòng)態(tài)加載多表頭的實(shí)例
相關(guān)文章
window.open以post方式將內(nèi)容提交到新窗口
最近在做web項(xiàng)目,碰到需要跨頁(yè)面?zhèn)鬟f參數(shù)的功能,就是那種需要把當(dāng)前頁(yè)面的內(nèi)容帶到新開(kāi)的子窗體中,以前的做法是傳一個(gè)id過(guò)去,然后在新窗口中去讀數(shù)據(jù)庫(kù)的內(nèi)容;比較有意思的是直接通過(guò)調(diào)用form的submit方法不能觸發(fā)onsubmit事件,查看了幫助文檔,必須手動(dòng)的觸發(fā),否則只能看到頁(yè)面刷新而沒(méi)有打開(kāi)新窗口2012-12-12
全面總結(jié)Javascript對(duì)數(shù)組對(duì)象的各種操作
最近有個(gè)同事問(wèn)了個(gè)問(wèn)題,關(guān)于數(shù)組,對(duì)象和類數(shù)組的,仔細(xì)說(shuō)起來(lái)都是基礎(chǔ),其實(shí)都沒(méi)什么好講的,不過(guò)看到還是有很多朋友有些迷糊,決定還是寫出來(lái)吧,下面這篇文章主要給大家介紹了Javascript對(duì)數(shù)組對(duì)象的各種操作,需要的朋友可以參考借鑒。2017-01-01
詳解webpack3如何正確引用并使用jQuery庫(kù)
本篇文章主要介紹了詳解webpack3如何正確引用并使用jQuery庫(kù),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
javascript秒數(shù)倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)代碼
幾秒后跳轉(zhuǎn)功能,動(dòng)態(tài)生成按鈕并動(dòng)態(tài)生成8位隨機(jī)數(shù),2008-09-09
js字符串截取函數(shù)slice、substring和substr的比較
這篇文章主要震碎js字符串截取函數(shù)slice、substring和substr進(jìn)行比較,感興趣的小伙伴們可以參考一下2016-05-05
如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對(duì)象)、BOM(瀏覽器對(duì)象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06
JavaScript的concat方法實(shí)例代碼(數(shù)組連接)
這篇文章主要介紹了JavaScript的concat方法實(shí)例代碼,包括數(shù)組連與字符連接,需要的朋友可以參考下2023-03-03
一行JavaScript代碼如何實(shí)現(xiàn)瀑布流布局
這篇文章主要給大家介紹了如何通過(guò)一行JavaScript代碼實(shí)現(xiàn)瀑布流布局的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12

