淺談網站頭部載入進度條的實現---NProgress
阿新 • • 發佈：2019-01-12
我們在移動端的瀏覽器上經常能看到頁面上方有一個進度條載入，pc端網頁也有，例如開啟我的github主頁：https://github.com/fzg2lj 點選導航欄上的stars,就會出現一個載入進度條。實現這種效果有兩種方式。
第一種：利用ajax全域性請求方式
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主頁面</title> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="../nprogress.css"> <style> .loading { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .6); font-size: 30px; } </style> <script src="../nprogress.js"></script> </head> <body> <div class="container pt-4"> <h1>會員中心</h1> <hr> <div class="row"> <aside class="col-md-3"> <div class="list-group"> <a class="list-group-item list-group-item-action" href="index.html">我的資料</a> <a class="list-group-item list-group-item-action" href="cart.html">我的購物車</a> <a class="list-group-item list-group-item-action" href="orders.html">我的訂單</a> </div> </aside> <main id="main" class="col-md-9"> <h2>我的個人資料</h2> <hr> </main> </div> </div> <div class="loading">正在玩命載入中...</div> <script src="../jquery.js"></script> <script> $(function($){ $(document) .ajaxStart(function () { //只要有 ajax 請求發生 就會執行 $('.loading').fadeIn() // 顯示載入提示 console.log('注意即將要開始請求了') }) .ajaxStop(function () { // 只要有 ajax 請求結束 就會執行 $('.loading').fadeOut() // 結束提示 console.log('請求結束了') }) }); </script>
不過推薦第二種方式，有一個現成的輕量級進度載入庫 http://ricostacruz.com/nprogress/
第二種：NProgress
$(document)
.ajaxStart(function () {
NProgress.start()
})
.ajaxStop(function () {
NProgress.done()
})
只要將第二種的程式碼替換掉上面第一種的程式碼，在點選跳轉其他頁面的時候，就會顯示載入進度條