1 先用白色蓋住body
2 遍歷網(wǎng)站的img 跟backgroundImage 統(tǒng)計(jì)數(shù)量 用100除這個(gè)數(shù)量 得到一個(gè)數(shù)‘i’ 這個(gè)數(shù)值就是進(jìn)度條移動(dòng)的一張圖的距離
3 用imagesLoaded 判斷每完成一張圖的讀取 就進(jìn)度條增加剛才計(jì)算的距離
當(dāng)load的圖片數(shù)量 == 網(wǎng)頁(yè)圖片數(shù)量時(shí)候 就讓進(jìn)度條跟白色遮罩fadeOut
完成

一般這種網(wǎng)頁(yè)的進(jìn)度條都是偽進(jìn)度條，我的博客也有這玩意兒，原理很簡(jiǎn)單，先用疊加隨機(jī)數(shù)讓進(jìn)度慢慢加到95%，然在頁(yè)面onload的時(shí)候講進(jìn)度加到100，也就是說(shuō)網(wǎng)絡(luò)不好的話，進(jìn)度條可能會(huì)在95%卡很久。

當(dāng)然網(wǎng)上也有很多監(jiān)控真實(shí)進(jìn)度的庫(kù)，但是個(gè)人認(rèn)為對(duì)于整個(gè)網(wǎng)頁(yè)愛(ài)說(shuō)，這只是錦上添花的東西，是否值得花費(fèi)太多精力和資源做這件事，還需要考慮。

貼上我用的偽進(jìn)度條代碼：

var progress = 0
var progressTimmer = null
var progressBar = $('#J-header-progress-bar')

function progress_func() {

  if (progress < 95) {

    progressTimmer = setTimeout(function() {
      progress += 5
      progressBar.style.width = progress + '%'
      progress_func()
    }, Math.random() * 500 + 40)

  }

}

progress_func()

window.addEventListener('load', function() {

  progress = 100
  progressBar.style.width = '100%'
  clearTimeout(progressTimmer)

  setTimeout(function() {
    progressBar.classList.add('completed')
  }, 100)

}, false);

你應(yīng)該是需要這個(gè) pace.js – 網(wǎng)頁(yè)自動(dòng)加載進(jìn)度條插件
官網(wǎng)例子

你想的思路我不知道怎么做，但是我想了這樣一個(gè)思路：先隱藏頁(yè)面所有元素，然后讓這個(gè)進(jìn)度條動(dòng)畫(huà)加載到100%，最后再控制頁(yè)面顯示。
不知道能不能滿足你的需求。

這個(gè)很好做的，不過(guò)要頁(yè)面內(nèi)容多一些效果才明顯，思路如下：
1、在body的頂部寫(xiě)一個(gè)像你那樣的進(jìn)度條，定位和樣式都調(diào)整好
2、在下面的內(nèi)容中每隔一段距離就執(zhí)行一個(gè)script腳本來(lái)控制進(jìn)度條的寬度，同時(shí)改變上面顯示的百分比數(shù)值
3、在window.onload函數(shù)的第一句就執(zhí)行讓這個(gè)進(jìn)度條div隱藏或者移除這個(gè)節(jié)點(diǎn)。

這里面有幾個(gè)注意的地方：
1、要想進(jìn)度條有個(gè)好的進(jìn)度展示體驗(yàn)，加上CSS過(guò)渡效果你必要的
2、進(jìn)度條放在body頂部，要給定位和大小之類的，便于控制
3、script可以放在任何一個(gè)地方，這也是要每隔幾個(gè)div或者其它節(jié)點(diǎn)就執(zhí)行一下腳本使其內(nèi)部的進(jìn)度條寬度改變，具體隔多少得看你頁(yè)面結(jié)構(gòu)，有圖片的就短一點(diǎn)，全是文本節(jié)點(diǎn)就隔開(kāi)一點(diǎn)兒，這都可以的。
4、放在body中的script里面可別寫(xiě)window.onload喲，不然白這么玩兒了。

總之記住一句話頁(yè)面的加載是從上往下執(zhí)行的