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