本文主要和大家分享JS實(shí)現(xiàn)網(wǎng)頁進(jìn)度條簡單代碼,希望能幫助到大家。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jquery實(shí)現(xiàn)簡單網(wǎng)頁進(jìn)度條</title> <style> * { margin: 0; padding: 0; } .loading { width: 100%; height: 100%; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; } img { width: 100%; } .loading .pic { width: 200px; height: 100px; background: url(img/07.gif) no-repeat center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <p class="loading"> <p class="pic"></p> </p> <!-- 頁面加載完成后要展示的圖片 --> <img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" alt=""> <img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" alt=""> <img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" alt=""> </body> <script> document.onreadystatechange = function () { if (document.readyState == "complete") { //判斷狀態(tài) $(".loading").fadeOut(); } } </script> </html>
相關(guān)推薦:
js編寫網(wǎng)頁進(jìn)度條實(shí)例方法
有關(guān)網(wǎng)頁進(jìn)度條的文章推薦
javascript 網(wǎng)頁進(jìn)度條簡單實(shí)例
以上就是JS實(shí)現(xiàn)網(wǎng)頁進(jìn)度條簡單代碼分享的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!