jquery實現(xiàn)頁面加載效果
更新時間:2017年02月21日 14:34:51 作者:冷戰(zhàn)
本文主要介紹了jquery實現(xiàn)頁面加載效果的實例,具有很好的參考價值,下面跟著小編一起來看下吧
1、說明
Jquery頁面加載可實現(xiàn)異步請求時提示“請稍后,正在加載...”效果,同步請求不可用(即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頁面加載特效</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); }); }); //開始加載 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" >點擊加載特效</a></div> <div class="cover"> </div> <div id="ajaxLoad" class="showLoad"> <div class="loadAll"> <img src="image/waiting.gif">加載中,請稍候...</div> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹)
- 如何解決jQuery EasyUI 已打開Tab重新加載問題
- 關(guān)于 jQuery Easyui異步加載tree的問題解析
- jQuery生成假加載動畫效果
- jquery加載頁面的方法(頁面加載完成就執(zhí)行)
- jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
- Jquery.LazyLoad.js修正版下載,實現(xiàn)圖片延遲加載插件
- jQuery頁面加載初始化常用的三種方法
- 詳解jQuery lazyload 懶加載
相關(guān)文章
jquery 禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件
本篇文章主要介紹了jquery禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點擊按鈕,在彈出的jQuery.dialog中,顯示異步返回的數(shù)據(jù)。WebService可以寫復(fù)雜的函數(shù),ashx可以根據(jù)傳過來的參數(shù)調(diào)用不同的方法,達(dá)到同樣的效果。2010-08-08使用Ajax和Jquery配合數(shù)據(jù)庫實現(xiàn)下拉框的二級聯(lián)動的示例
下面小編就為大家分享一篇使用Ajax和Jquery配合數(shù)據(jù)庫實現(xiàn)下拉框的二級聯(lián)動的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery實現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼
這篇文章主要介紹了jquery實現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁面元素滾動效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11