常見的網頁載入進度條
我們為什麼要做網頁載入進度條？
是為了讓使用者的等待不再枯燥，讓使用者有一個等待的目標.
為什麼要頁面載入？
這些網站開啟後網頁上面需要載入一些控制元件以使網頁上的一些程式能夠執行，從而顯現出相應的效果，如線上播放的視訊、FLASH都屬於這種情況，不同的效果對應的不同執行程式，這些執行程式你要看是哪裡開發的，有些是安全的，比如一些大家都知道的，像FLASH或者REAL的，但所有這些實際上都是要求在你的計算機上面下載並[執行程式]，原則上都是不安全的。
我們先用一個定時器做一個頁面載入（缺點：頁面載入時間是死的,無法根據內容多少來判斷是否要載入多長時間！！）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定時器</title>
<script type="text/javascript" src="css/jquery1.js">
</script>
<style type="text/css">
*{
margin: 0;
padding: 0 ;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 64px;
height: 64px;
background: url("images/25.gif");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<div class="loading">
<div class="pic">
</div>
</div>
<body>
.....
<script type="text/javascript">
$(function(){
setInterval(function(){
$(".loading").fadeOut();
},3000)
})
</script>
</body>
</html>
用一個簡單的js程式碼來做一個頁面載入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>進度條</title>
<style type="text/css">
*{
margin: 0;
padding: 0 ;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 64px;
height: 64px;
background: url("images/25.gif");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
<script type="text/javascript">
//document.onreadystatechange頁面載入狀態改變時的事件
document.onreadystatechange=function(){
if(document.readyState=="complete");{
$(".loading").fadeOut();
}
}
</script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
.....
</body>
</html>
接下來教大家做一個定位在頭部的進度條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 0%;//起始是0
height: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
<header>
.....
</header>
<script type="text/javascript">
$(".loading .pic").animate({width:"10%"},100) //每載入一個內容就執行一次js
</script>
<banner>
.....
</banner>
<script type="text/javascript">
$(".loading .pic").animate({width:"40%"},100)
</script>
<section>
.....
</section>
<script type="text/javascript">
$(".loading .pic").animate({width:"70%"},100)
</script>
<div class="main">
.....
</div>
<script type="text/javascript">
$(".loading .pic").animate({width:"100%"},100,function(){
$(".loading").fadeOut();//執行完成 隱藏進度條
}
)
</script>
</body>
</html>
實時獲取載入數值的進度條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實時獲取</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 0%;
height: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: palegreen;
font-size: 30px;
text-align:center;
line-height: 100px;
}
.loading .pic span{
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 10px;
left: -10px;
box-shadow: 0 3px 0 #666 ;
border-radius: 50%;
animation:rotate 1s infinite linear ;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
<script>
$(function(){
var img=$("img");
var num=0;
img.each(function(i){
var oImg=new Image();
oImg.onload=function(){
oImg.onload=null;//清除圖片多次請求
num++;
//獲取數值並將數值顯示出來
$(".loading b").html(parseInt(num/$("img").size()*100)+"%");
if(num>=i){
$(".loading").fadeOut();
}
}
oImg.src=img[i].src;
})
})
</script>
</head>
<body>
<div class="loading">
<div class="pic">
<span id="">
</span>
<b>0%</b>
</div>
</div>
<img src=“”圖片“”>
<img src=“”圖片“”>
<img src=“”圖片“”>
<img src=“”圖片“”>
<img src=“”圖片“”>
<img src=“”圖片“”>
<img src=“”圖片“”>
</body>
</html>
相關文章
- vue中頁面載入進度條效果的實現Vue
- 超酷jQuery進度條載入動畫集合jQuery動畫
- ajax進度條 非同步下載進度條非同步
- iOS UIWebView載入時新增進度條01iOSUIWebView
- jQuery載入進度條例項程式碼jQuery
- 如何實現圖片預載入和載入進度條
- 直播平臺開發，載入網頁、html檔案顯示載入進度網頁HTML
- jQuery環形旋轉載入進度條效果jQuery
- CSS3 螺紋載入進度條效果CSSS3
- 專案需求討論-WebView進度載入條WebView
- 前端資源預載入並展示進度條前端
- C# 下載帶進度條程式碼（普通進度條）C#
- js百分比載入進度條效果JS
- 【新特性速遞】進度條，進度條，進度條
- 直播平臺製作，Glide載入網路圖，進度條顯示IDE
- Silverlight 系統初始載入進度條美化
- 報表載入大資料時顯示進度條大資料
- QWebView無法載入百度等網頁WebView網頁
- 網頁常見的換膚技術網頁
- js 進入頁面載入的方法JS
- Glide載入進度IDE
- 直播平臺軟體開發，讓原本沒有進度條的頁面顯示進度條
- 《前端實戰總結》之使用pace.js為你的網站新增載入進度條前端JS網站
- 網頁設計常見問題網頁
- HttpWebChilent上傳與下載進度條HTTPWeb
- 網頁抓取常見的問題有哪些？網頁
- 常見的網頁播放器程式碼網頁播放器
- Delphi下載指定網址（URL）的檔案，帶進度條顯示
- 可愛！帶有數字顯示的載入進度條效果外掛
- Python展示檔案下載進度條Python
- pyqt5的下載進度條 實現模板QT
- Cocos2dx之進度條使用，非同步載入資源進快取非同步快取
- Qt 進度條QT
- ArcGIS API for Silverlight 地圖載入進度條類之MapProgressBarAPI地圖APP
- 處理JS分頁載入的網頁_recvJS網頁
- HTML <progress> 進度條HTML
- wkwebView 新增 進度條WebView
- canvas 畫進度條Canvas