JS Loading 進度條實現思路

時間 2019-11-14

原文原文鏈接

　　有時候訪問網站，在加載的過程當中常常會出現顯示加載進度的進度條，或者相似的一個旋轉的菊花圖。若是留心的話不難發現，那些進度條出現的加載進度數字幾乎每次都是那幾個數字，30% -> 50% -> 80%，這樣。這樣會極大提升用戶的體驗，既能告知用戶加載進度，讓等待過程再也不那麼無聊，又能防止用戶覺得網站有問題而直接離開站點。可是這個進度條是怎麼實現的呢？javascript

　　通常在網絡狀況很差的狀況下，加載的首頁又比較大的時候就可使用進度條或者一些有意思的動畫。通常的實現方式剛開始時給整個頁面加個蒙板層，將加載過程覆蓋在蒙板層下面（有可能很醜陋），而後在蒙板層上加個進度條或者旋轉的菊花。css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>load</title>
<style type="text/css">
.current a {
    font-size: 20px;
}
.over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    opacity:0.5;
    z-index: 1000;
}
.layout {
    display: none;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 1001;
    text-align:center;
}
</style>
<script type="text/javascript">
function showLoading(){
  document.getElementById("over").style.display = "block";
  document.getElementById("layout").style.display = "block";
}
</script>
</head>
<body>
    <div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
    <div id="over" class="over"></div>
    <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>
</body>
</html>

　　這段代碼簡單介紹瞭如何添加菊花圖，可是進度條的話怎麼玩進度呢？能夠用html5的progress標籤或者動態圖！html

　　進度條無非就是多了一個控制進度顯示的模塊，那怎麼控制呢？這個也很簡單，已加載內容 / 總體內容 * 100%；html5

　　可是問題來了，目前在文檔沒有加載完成以前誰都沒有辦法得到要加載的文件大小。可是，仍是有一個解決辦法。由於通常要加載的內容分區塊加載，好比頭部區域，主題內容、邊欄內容、註腳內容等。會有多個ajax去請求（通常不會全都用ajax，這裏只是舉個例子），再好比，頭部區域的請求ajax完成了，就認爲加載了30%，這個時候修改進度條進度或者給菊花圖換個數字，主題內容的請求ajax加載完了，就認爲加載了80%，以此類推。這就是爲何網站的加載進度條通常只是顯示某幾個進度數字的緣由！java

<script type="text/javascript">
$(document).ready(function(){
　　.
　　.
    $.ajax({ url: "header", success: function(){
    //進度條進度改成30%
  }});
　　.
　　.
　　.
  $.ajax({ url: "content", success: function(){
    //進度條進度改成80%
  }});
});
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。