js實(shí)現(xiàn)的頁(yè)面加載完畢之前l(fā)oading提示效果完整示例【附demo源碼下載】
本文實(shí)例講述了js實(shí)現(xiàn)的頁(yè)面加載完畢之前l(fā)oading提示效果。分享給大家供大家參考,具體如下:
一、JS代碼:
//獲取瀏覽器頁(yè)面可見(jiàn)高度和寬度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //計(jì)算loading框距離頂部和左部的距離(loading框的寬度為215px,高度為61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0; //在頁(yè)面未加載完畢之前顯示的loading Html自定義內(nèi)容 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">頁(yè)面加載中,請(qǐng)等待...</div></div>'; //呈現(xiàn)loading效果 document.write(_LoadingHtml); //window.onload = function () { // var loadingMask = document.getElementById('loadingDiv'); // loadingMask.parentNode.removeChild(loadingMask); //}; //監(jiān)聽(tīng)加載狀態(tài)改變 document.onreadystatechange = completeLoading; //加載狀態(tài)為complete時(shí)移除loading效果 function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }
二、效果:
說(shuō)明:
將此段js代碼放入<head>最后即可;
其中l(wèi)oading效果的樣式可以根據(jù)自己的風(fēng)格修改,loading.gif這個(gè)圖片需要自己找(網(wǎng)上很多的)。
完整demo實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù)實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù),涉及javascript針對(duì)頁(yè)面元素樣式的遍歷與操作技巧,需要的朋友可以參考下2015-07-07JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01JS中不應(yīng)該使用箭頭函數(shù)的四種情況詳解
箭頭函數(shù)給我們的工作帶來(lái)了極大的方便,但是它們有什么缺點(diǎn)呢?我們應(yīng)該一直使用箭頭函數(shù)嗎?我們應(yīng)該在哪些場(chǎng)景中停止使用箭頭函數(shù)?本文就來(lái)為大家詳細(xì)講講2022-07-07Js生成隨機(jī)數(shù)/隨機(jī)字符串的方法小結(jié)【5種方法】
這篇文章主要介紹了Js生成隨機(jī)數(shù)/隨機(jī)字符串的方法,結(jié)合實(shí)例形式總結(jié)分析了5種Js生成隨機(jī)數(shù)/隨機(jī)字符串的操作技巧,需要的朋友可以參考下2020-05-05css+js實(shí)現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項(xiàng)目中實(shí)現(xiàn)的方式,全屏遮罩,部分區(qū)域可操作,需要的朋友可以參考下2014-03-03前端JavaScript實(shí)現(xiàn)本地模糊搜索功能的方法實(shí)例
對(duì)于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來(lái)做。但是有時(shí)候一些輕量級(jí)的列表前端來(lái)做可以減少ajax請(qǐng)求,在一定程度上提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實(shí)現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07小程序識(shí)別身份證,銀行卡,營(yíng)業(yè)執(zhí)照,駕照的實(shí)現(xiàn)
這篇文章主要介紹了小程序識(shí)別身份證,銀行卡,營(yíng)業(yè)執(zhí)照,駕照的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11動(dòng)態(tài)修改DOM 里面的 id 屬性的弊端分析
我不知道是否有什么標(biāo)準(zhǔn)規(guī)定不允許修改id屬性,或者不建議修改id屬性,總之IE對(duì)此支持不佳。2008-09-09