jquery實(shí)現(xiàn)頁(yè)面加載效果
1、說(shuō)明
Jquery頁(yè)面加載可實(shí)現(xiàn)異步請(qǐng)求時(shí)提示“請(qǐng)稍后,正在加載...”效果,同步請(qǐng)求不可用(即ajax async: false)。
2、代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery頁(yè)面加載特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } .loading { margin: 100px auto 0 auto; width: 400px; text-align: center; font-size: 18px; } .loading .action { text-decoration: none; font-family: "微軟雅黑" , "宋體"; } .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; width: 100%; height: 100%; _padding: 0 20px 0 0; background: #f6f4f5; display: none; } .showLoad { position: fixed; top: 0; left: 50%; z-index: 9999; opacity: 0; filter: alpha(opacity=0); margin-left: -80px; } *html, *html body { background-image: url(about:blank); background-attachment: fixed; } *html .showLoad, *html .cover { position: absolute; top: expression(eval(document.documentElement.scrollTop)); } #ajaxLoad { border: 1px solid #8CBEDA; font-size: 12px; font-weight: bold; } #ajaxLoad div.loadAll { width: 180px; height: 50px; line-height: 50px; border: 2px solid #D6E7F2; background: #fff; } #ajaxLoad img { margin: 10px 15px; float: left; display: inline; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function () { var hei = $(document).height(); $(".cover").css({ "height": hei }); $(".action").click(function () { startWaiting(); setTimeout(function () { endWaiting(); }, 3000); }); }); //開(kāi)始加載 function startWaiting() { $(".cover").css({ 'display': 'block', 'opacity': '0.8' }); $(".showLoad").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200); } //結(jié)束加載 function endWaiting() { $(".showLoad").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400); $(".cover").css({ 'display': 'none', 'opacity': '0' }); } </script> </head> <body> <div class="loading"> <a class="action" href="javascript:void(0);" rel="external nofollow" >點(diǎn)擊加載特效</a></div> <div class="cover"> </div> <div id="ajaxLoad" class="showLoad"> <div class="loadAll"> <img src="image/waiting.gif">加載中,請(qǐng)稍候...</div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹(shù))
- 如何解決jQuery EasyUI 已打開(kāi)Tab重新加載問(wèn)題
- 關(guān)于 jQuery Easyui異步加載tree的問(wèn)題解析
- jQuery生成假加載動(dòng)畫效果
- jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行)
- jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
- Jquery.LazyLoad.js修正版下載,實(shí)現(xiàn)圖片延遲加載插件
- jQuery頁(yè)面加載初始化常用的三種方法
- 詳解jQuery lazyload 懶加載
相關(guān)文章
jquery 禁止鼠標(biāo)右鍵并監(jiān)聽(tīng)右鍵事件
本篇文章主要介紹了jquery禁止鼠標(biāo)右鍵并監(jiān)聽(tīng)右鍵事件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點(diǎn)擊按鈕,在彈出的jQuery.dialog中,顯示異步返回的數(shù)據(jù)。WebService可以寫復(fù)雜的函數(shù),ashx可以根據(jù)傳過(guò)來(lái)的參數(shù)調(diào)用不同的方法,達(dá)到同樣的效果。2010-08-08十個(gè)迅速提升JQuery性能讓你的JQuery跑得更快
jQuery正在成為Web開(kāi)發(fā)人員首選的JavaScript庫(kù),作為Web開(kāi)發(fā)者,除了要了解語(yǔ)言和框架的應(yīng)用技巧外如何提升語(yǔ)言的性能,本文提供即刻提升你的腳本性能的十個(gè)步驟 簡(jiǎn)單的幾步讓你的JQuery跑得更快 需要的朋友可以參考下2012-12-12使用Ajax和Jquery配合數(shù)據(jù)庫(kù)實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例
下面小編就為大家分享一篇使用Ajax和Jquery配合數(shù)據(jù)庫(kù)實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jquery Validation表單驗(yàn)證使用詳解
功能強(qiáng)大的 jquery 表單驗(yàn)證插件,適用于日常的 E-mail、電話號(hào)碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證,除自身?yè)碛胸S富的驗(yàn)證規(guī)則外,還可以添加自定義的驗(yàn)證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+2015-04-04jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03jquery實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)面平滑滾動(dòng)效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)面平滑滾動(dòng)效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁(yè)面元素滾動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11