《動手實現一個網頁加載進度loading》

本文轉載自查看原文 2017-01-04 11:25 20727 css/ jQuery/ Web/ html/ javascript

loading隨處可見，比如一個app經常會有下拉刷新，上拉加載的功能，在刷新和加載的過程中為了讓用戶感知到 load 的過程，我們會使用一些過渡動畫來表達。最常見的比如“轉圈圈”，“省略號”等等。

網頁loading有很多用處，比如頁面的加載進度，數據的加載過程等等，數據的加載loading很好做，只需要在加載數據之前（before ajax）顯示loading效果，在數據返回之后（ajax completed）結束loading效果，就可以了。

但是頁面的加載進度，需要一點技巧。

頁面加載進度一直以來都是一個常見而又晦澀的需求，常見是因為它在某些“重”網頁（特別是網頁游戲）的應用特別重要；晦澀是因為web的特性，各種零散資源決定它很難是“真實”的進度，只能是一種“假”的進度，至少在邏輯代碼加載完成之前，我們都不能統計到進度，而邏輯代碼自身的進度也無法統計。另外，我們不可能監控到所有資源的加載情況。

所以頁面的加載進度都是“假”的，它存在的目的是為了提高用戶體驗，使用戶不至於在打開頁面之后長時間面對一片空白，導致用戶流失。

既然是“假”的，我們就要做到“仿真”才有用。仿真是有意義的，事實上用戶並不在乎某一刻你是不是真的加載到了百分之幾，他只關心你還要load多久。所以接下來我們就來實現一個頁面加載進度loading。

首先准備一段loading的html：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>動手實現一個網頁加載進度loading</title>
 5 </head>
 6 <body>
 7   <div class="loading" id="loading">
 8     <div class="progress" id="progress">0%</div>
 9   </div>
10 </body>
11 </html>

來點樣式裝扮一下：

.loading {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 5;
}

.loading .progress {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

我們先假設這個loading只需要在頁面加載完成之后隱藏，中間不需要顯示進度。那么很簡單，我們第一時間想到的就是window.onload：

（以下內容為了方便演示，默認使用jQuery，語法有es6的箭頭函數）

var $loading = $('#loading')
var $progress = $('#progress')

window.onload = () => {
  $loading.hide()
}

ok，這樣基本的loading流程就有了，我們增加一個進度的效果，每隔100ms就自增1，一直到100%為止，而另一方面window loaded的時候，我們把loading給隱藏。

我們來補充一下進度：

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0  // 初始化進度

var timer = window.setInterval(() => {  // 設置定時器
  if (prg >= 100) {  // 到達終點，關閉定時器
    window.clearInterval(timer)
    prg = 100
  } else {  // 未到終點，進度自增
    prg++
  }

  $progress.html(prg + '%')
  console.log(prg)
}, 100)

window.onload = () => {
  $loading.hide()
}

效果不錯，但是有個問題，萬一window loaded太慢了，導致進度顯示load到100%了，loading還沒有隱藏，那就打臉了。所以，我們需要讓loading在window loaded的時候才到達終點，在這之前，loading可以保持一個等待的狀態，比如在80%的時候，先停一停，然后在loaded的時候快速將進度推至100%。這個做法是目前絕大部份進度條的做法。

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = window.setInterval(() => {
  if (prg >= 80) {  // 到達第一階段80%，關閉定時器，保持等待
    window.clearInterval(timer)
    prg = 100
  } else {
    prg++
  }

  $progress.html(prg + '%')
  console.log(prg)
}, 100)

window.onload = () => {
  window.clearInterval(timer)
  window.setInterval(() => {
    if (prg >= 100) {  // 到達終點，關閉定時器
      window.clearInterval(timer)
      prg = 100
      $loading.hide()
    } else {
      prg++
    }

    $progress.html(prg + '%')
    console.log(prg)
  }, 10)  // 時間間隔縮短
}

ok，這差不多就是我們想要的功能了，我們來提煉一下代碼，把重復的代碼給封裝一下：

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = 0

progress(80, 100)

window.onload = () => {
  progress(100, 10, () => {
    $loading.hide()
  })
}

function progress (dist, delay, callback) {
  window.clearInterval(timer)
  timer = window.setInterval(() => {
    if (prg >= dist) {
      window.clearInterval(timer)
      prg = dist
      callback && callback()
    } else {
      prg++
    }

    $progress.html(prg + '%')
    console.log(prg)
  }, delay)
}

我們得到了一個progress函數，這個函數就是我們主要的功能模塊，通過傳入一個目標值、一個時間間隔，就可以模擬進度的演化過程。

目前來看，這個進度還是有些問題的：

　　1.0、進度太平均，相同的時間間隔，相同的增量，不符合網絡環境的特點；

　　2.0、window.onload太快，我們還來不及看清100%，loading就已經不見了；

　　3.0、每次第一階段都是在80%就暫停了，露餡兒了；

第一個點，我們要讓時間間隔隨機，增量也隨機；第二個點很簡單，我們延遲一下就好了；第三點也需要我們隨機產生一個初始值。

增量隨機很好辦，如何讓時間間隔隨機？setInterval是無法動態設置delay的，那么我們就要把它改造一下，使用setTimeout來實現。（setInterval跟setTimeout的用法和區別就不細說了吧？）

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = 0

progress([80, 90], [1, 3], 100)  // 使用數組來表示隨機數的區間

window.onload = () => {
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延遲了一秒再隱藏loading
      $loading.hide()
    }, 1000)
  })
}

function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }

    $progress.html(parseInt(prg) + '%')  // 留意，由於已經不是自增1，所以這里要取整
    console.log(prg)
  }, _delay)
}

function random (n) {
  if (typeof n === 'object') {
    var times = n[1] - n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

至此，我們差不多完成了需求。

but，還有一個比較隱蔽的問題，我們現在使用window.onload，發現從進入頁面，到window.onload這中間相隔時間十分短，我們基本是感受不到第一階段進度（80%）的，這是沒有問題的——我們在意的是，如果頁面的加載資源數量很多，體積很大的時候，從進入頁面，到window.onload就不是這么快速了，這中間可能會很漫長（5～20秒不等），但事實上，我們只需要為 首屏資源 的加載爭取時間就可以了，不需要等待所有資源就緒，而且更快地呈現頁面也是提高用戶體驗的關鍵。

我們應該考慮頁面loading停留過久的情況，我們需要為loading設置一個超時時間，超過這個時間，假設window.onload還沒有完成，我們也要把進度推到100%，把loading結束掉。

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = 0

progress([80, 90], [1, 3], 100)  // 使用數組來表示隨機數的區間

window.onload = () => {
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延遲了一秒再隱藏loading
      $loading.hide()
    }, 1000)
  })
}

window.setTimeout(() => {  // 設置5秒的超時時間
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延遲了一秒再隱藏loading
      $loading.hide()
    }, 1000)
  })
}, 5000)

function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }

    $progress.html(parseInt(prg) + '%')  // 留意，由於已經不是自增1，所以這里要取整
    console.log(prg)
  }, _delay)
}

function random (n) {
  if (typeof n === 'object') {
    var times = n[1] - n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

我們直接設置了一個定時器，5s的時間來作為超時時間。這樣做是可以的。

but，還是有問題，這個定時器是在js加載完畢之后才開始生效的，也就是說，我們忽略了js加載完畢之前的時間，這誤差可大可小，我們設置的5s，實際用戶可能等待了8s，這是有問題的。我們做用戶體驗，需要從實際情況去考慮，所以這個開始時間還需要再提前一些，我們在head里來記錄這個開始時間，然后在js當中去做對比，如果時間差大於超時時間，那我們就可以直接執行最后的完成步驟，如果小於超時時間，則等待 剩余的時間 過后，再完成進度。

先在head里埋點，記錄用戶進入頁面的時間loadingStartTime：

<!DOCTYPE html>
<html>
<head>
  <title>動手實現一個網頁加載進度loading</title>
  <script>
    window.loadingStartTime = new Date()
  </script>
  <script src="index.js"></script>
</head>
<body>
  <div class="loading" id="loading">
    <div class="progress" id="progress">0%</div>
  </div>
</body>
</html>

然后，我們對比 當前的時間 ，看是否超時：（為了方便復用代碼，我把完成的部分封裝成函數complete）

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = 0
var now = new Date()  // 記錄當前時間
var timeout = 5000  // 超時時間

progress([80, 90], [1, 3], 100)

window.onload = () => {
  complete()
}

if (now - loadingStartTime > timeout) {  // 超時
  complete()
} else {
  window.setTimeout(() => {  // 未超時，則等待剩余時間
    complete()
  }, timeout - (now - loadingStartTime))
}

function complete () {  // 封裝完成進度功能
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {
      $loading.hide()
    }, 1000)
  })
}

function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }

    $progress.html(parseInt(prg) + '%')
    console.log(prg)
  }, _delay)
}

function random (n) {
  if (typeof n === 'object') {
    var times = n[1] - n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

至此，我們算是完整地實現了這一功能。

然而，事情還沒有結束，少年你太天真。

如果目的是為了寫一個純粹障眼法的偽loading，那跟其他loading的實現就沒什么區別了，我們做事講究腳踏實地，能實現的實現，不能實現的，為了團隊和諧，我們不得已坑蒙拐騙。那么我們還能更貼近實際情況一點嗎？其實是可以的。

我們來分析一個場景，假設我們想讓我們的loading更加真實一些，那么我們可以選擇性地對頁面上幾個比較大的資源的加載進行跟蹤，然后拆分整個進度條，比如我們頁面有三張大圖a、b、c，那么我們將進度條拆成五段，每加載完一張圖我們就推進一個進度：

隨機初始化[10, 20] ->
圖a推進20%的進度 ->
圖b推進25%的進度 ->
圖c推進30%的進度 ->
完成100%

這三張圖要占20% + 25% + 30% = 75%的進度。

問題是，如果圖片加載完成是按照順序來的，那我們可以很簡單地：10（假設初始進度是10%） -> 30 -> 55 -> 85 -> 100，但事實是，圖片不會按照順序來，誰早到誰晚到是說不准的，所以我們需要更合理的方式去管理這些進度增量，使它們不會互相覆蓋。

　　1.0、我們需要一個能夠替我們累計增量的變量next；

　　2.0、由於我們的progress都是傳目的進度的，我們需要另外一個函數add，來傳增量進度。

var $loading = $('#loading')
var $progress = $('#progress')
var prg = 0

var timer = 0
var now = new Date()
var timeout = 5000

var next = prg

add([30, 50], [1, 3], 100)  // 第一階段

window.setTimeout(() => {  // 模擬圖a加載完
  add(20, [1, 3], 200)
}, 1000)

window.setTimeout(() => {  // 模擬圖c加載完
  add(30, [1, 3], 200)
}, 2000)

window.setTimeout(() => {  // 模擬圖b加載完
  add(25, [1, 3], 200)
}, 2500)

window.onload = () => {
  complete()
}

if (now - loadingStartTime > timeout) {
  complete()
} else {
  window.setTimeout(() => {
    complete()
  }, timeout - (now - loadingStartTime))
}

function complete () {
  add(100, [1, 5], 10, () => {
    window.setTimeout(() => {
      $loading.hide()
    }, 1000)
  })
}

function add (dist, speed, delay, callback) {
  var _dist = random(dist)
  if (next + _dist > 100) {  // 對超出部分裁剪對齊
    next = 100
  } else {
    next += _dist
  }

  progress(next, speed, delay, callback)
}

function progress (dist, speed, delay, callback) {
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= dist) {
      window.clearTimeout(timer)
      prg = dist
      callback && callback()
    } else {
      prg += _speed
      progress (dist, speed, delay, callback)
    }

    $progress.html(parseInt(prg) + '%')
    console.log(prg)
  }, _delay)
}

function random (n) {
  if (typeof n === 'object') {
    var times = n[1] - n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

我們這里為了方便，用setTimeout來模擬圖片的加載，真實應用應該是使用image.onload。

接下來整理一下有點亂的代碼，封裝成一個插件，github地址為：ez-progress

ez-progress 是一個web（偽）進度插件，使用 ez-progress 實現這個功能非常簡單：

var Progress = require('ez-progress')
var prg = new Progress()

var $loading = $('#loading')
var $progress = $('#progress')

prg.on('progress', function (res) {
  var progress = parseInt(res.progress)  // 注意進度取整，不然有可能會出現小數
  $progress.html(progress + '%')
})

prg.go([60, 70], function (res) {
  prg.complete(null, [0, 5], [0, 50])  // 飛一般地沖向終點
}, [0, 3], [0, 200])

window.onload = function () {
  prg.complete(null, [0, 5], [0, 50])  // 飛一般地沖向終點
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端網頁加載進度條的實現網頁加載進度條的實現動手實現一個單頁面應用自己動手實現一個簡單的 IOC容器自己動手實現一個阻塞隊列自己動手系列——實現一個簡單的LinkedList 自己動手系列——實現一個簡單的ArrayList 自己動手實現一個MVVM庫 VUE網頁loading加載狀態網頁loading GIF圖片（加載）