有沒有人做過這樣的進(jìn)度條？？如何控制它？

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

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

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

貼上我用的偽進(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)該是需要這個 pace.js – 網(wǎng)頁自動加載進(jìn)度條插件
官網(wǎng)例子

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

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

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

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