1. 程式人生 > >關於網頁載入,頁面頂部顯示頁面載入線性進度條效果實現。

關於網頁載入,頁面頂部顯示頁面載入線性進度條效果實現。

今早早逛淘寶的時候突然發現淘寶每次在點選進入下頁的時候的頁面頂部就會出現頁面載入進度效果,其實之前在訪問好多國外的網站的時候也見過這樣的效果,突然一時興起想要知道如何實現。

如圖所示:

這裡寫圖片描述

然後就百度一下,竟然找到了兩款外掛,。

外掛一:LoadingBar

這裡只介紹NProgress.js呼叫方法,第一個自己去琢磨吧。

這裡寫圖片描述

根據英文翻譯(英語水平太渣翻譯不對見諒):

第一個方法是開始進度
第二個方法是設定百分比
第三個方法是設定增量
第四個方法是結束進度

具體呼叫demo:

<!DOCTYPE html>
<html lang='en'>
<head> <meta charset='utf-8'> <title>NProgress: slim progress bars in JavaScript</title> <link href='support/style.css' rel='stylesheet' /> <link href='nprogress.css' rel='stylesheet' /> <meta name="viewport" content="width=device-width"> <script
src="https://code.jquery.com/jquery-1.11.2.min.js">
</script> </head> <body> </body> </html> <script src='nprogress.js'></script> <script> NProgress.start(); setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000); </script
>

這裡要注意的時候

<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

這裡程式碼一定要放到底部執行,切在引入NProgress指令碼後,如果放到header裡面則不會得到想要的效果。一開始我也陷入坑裡面了。

執行效果如下:

這裡寫圖片描述

結束語:先這樣了。準備搶國慶回來的票…….

相關推薦

關於網頁載入頁面頂部顯示頁面載入線性進度效果實現

今早早逛淘寶的時候突然發現淘寶每次在點選進入下頁的時候的頁面頂部就會出現頁面載入進度效果,其實之前在訪問好多國外的網站的時候也見過這樣的效果,突然一時興起想要知道如何實現。 如圖所示: 然後就百度一下,竟然找到了兩款外掛,。 外掛一:LoadingBa

騰訊X5WebView+JsBridge互動及WebView載入進度效果實現

最近在專案開發中有不少頁面需要採用html的方式實現,自然而然就涉及到原生和js的互動問題,WebView也提供了addJavascriptInterface方法可以進行js的互動,實現也比較簡單,由於需要互動的地方比較多,還是沒有采用這種方式,使用了JsBridge第三方來實現,JsBridg

解決webview多次載入無法準確判斷頁面載入完成的問題

package com.brian; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.drawable.GradientDrawable.Orienta

500px-An_example_of_theoretical_DNS_recursion_svg在瀏覽器地址欄輸入地址到瀏覽器顯示頁面的過程

exp 定義 這一 char ... .com 很好 根據 長輪詢 作為一個軟件開發者,你一定會對網絡應用如何工作有一個完整的層次化的認知,同樣這裏也包括這些應用所用到的技術:像瀏覽器,HTTP,HTML,網絡服務器,需求處理等等。 本文將更深入的研究當你輸入一個網址的時候

初識和利用Servlet獲取和顯示頁面提交的資料以及對MySQL資料庫的簡單操作 7.04

Servlet:web伺服器端的程式設計技術。是繼承了javax.servlet.http.HttpServlet類的Java類。由支援servlet的web伺服器(tomcat)呼叫和啟動執行。一個

word外掛無法載入System.IO.FileLoadException: 未能載入檔案或程式集“Microsoft.Office.Interop.Word, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c”或

問題 System.Reflection.TargetInvocationException: 呼叫的目標發生了異常。 ---> System.IO.FileLoadException: 未能載入檔案或程式集“Microsoft.Office.Interop.Word, Version=15.0.0.

layui的流載入點選切換流載入內容需要多次flow.loadpage混亂解決方案

layui的流載入,如果需要點選切換流載入的內容,同時寫多個flow.load會導致多次呼叫flow導致整體page混亂 解決方案如下: html: <div class="model-list"> <ul id="LAY_demo1" style="

word外掛無法載入System.IO.FileLoadException: 未能載入檔案或程式集“Microsoft.Office.Interop.Word, Version=15.0.0.0, Culture=neutral, PublicKeyTo

問題 System.Reflection.TargetInvocationException: 呼叫的目標發生了異常。 ---> System.IO.FileLoadException: 未能載入檔案或程式集“Microsoft.Office.Interop.Word, Version=15.0.0.0

做了一個下拉載入ajax請求裡總是載入失敗url路徑該怎麼填寫求原因

@TOC 歡迎使用Markdown編輯器 你好! 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章,瞭解一下Markdown的基本語法知識。 新的改變 我們對Markdown編輯器進行了

magento 將分類的圖片放到頂部顯示

block是按照順序依次而來,依次畫出來 如果想將某個部分的資料搞到頂部顯示,而且這個資料是內容部分計算出來的,那麼可以用下面的方式解決 1. 在 layout/template.phtml 檔案的後面加上 <block type="core/text_l

js優先載入js最先載入js優先於html載入

今天遇到一個要用js攔截的問題,所以要優先執行js,或者在頁面載入之前執行js 1、在網上搜了好多相關的方法,都不行,如圖:      有說用ready方法的,有說用onload方法的,我都試用過,

Glide結合Recyclerview(Listview)實現列表滑動的時候圖片不載入滑動停止的時候載入

首先:glide 的方法,發現有兩個方法: Glide.with(context).resumeRequests(); Glide.with(context).pauseRequests(); 根

Bootstrap基礎7(標簽、徽章、大屏展播、頁面標題、縮略圖、進度、面板、折疊效果

footer ctype success htm header bit src int get <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-

淺談網站頭部載入進度實現---NProgress

我們在移動端的瀏覽器上經常能看到頁面上方有一個進度條載入,pc端網頁也有,例如開啟我的github主頁:https://github.com/fzg2lj 點選導航欄上的stars,就會出現一個載入進度條。實現這種效果有兩種方式。 第一種:利用ajax全域性請求方式 程式碼如下

用echarts畫圓環圖顯示進度效果

要實現類似於下圖的效果,開始用的css畫出來的,感覺很複雜,換了echart省很多程式碼直接上程式碼: var e=80;   var Chart4 = echarts.init(document.ge

突發奇想JavaScript模仿下載進度效果

fun 調用函數 auto pro meta har onload 更新 box 不定時的更新,這一次采用JavaScript 模仿下載進度條效果。原理:兩個div嵌套,裏面的寬度0,外部自己隨便定義,采用 setInterval() 函數增加 裏面的div 的 width

記錄小文件上傳的幾個例子(含進度效果附源碼下載)

clas 運行 open ntb httppost 會有 text recent mappath 1、簡單原生上傳 無javascript腳本、無進度條; 借助iframe實現post提交後的無刷新效果; jquery插件ajaxFileUpload.js的實現原

CircleNumberProgressBar:顯示數字的圓形進度

圓形的ProgressBar是經常使用的控制元件,能夠顯示當前的進度,但有時候可能還不夠直觀,原有控制元件顯示進度時並不能準確的知道當前進度是多少,又或是遇到專案需求需要在進度條中間加上數字顯示,嗯……專案需求,所以這個時候就需要自己對原有的Progress

Python3 Print 同一行列印顯示進度效果

# -*- coding:utf-8 -*- ''' print 中的 end = '\r' 是一個轉義符,作用是讓游標重新回到首行 預設是'\n'換行符,windows系統下如果設定後不改回預設值會

通過用Python輸出進度效果學習perf_counter()和sleep()函式的用法

首先宣告一下,下面的程式碼是我在看中國大學mooc裡的教學視訊學來的。覺得很有意思,分享一下。先看一下,執行完畢的結果吧,進度條跑到了100%,停止之後的效果就是圖中所示。下面分析一下程式碼:port time                     #引入time庫,後面用