有没有人做过这样的进度条？？如何控制它？

Question

打开页面时先显示这个，等window.onload时在把它隐藏，在页面加载完时，如何控制它到100%呢，有没有人写过类似的，分享一下

Answer 1

你想的思路我不知道怎么做，但是我想了这样一个思路：先隐藏页面所有元素，然后让这个进度条动画加载到100%，最后再控制页面显示。
不知道能不能满足你的需求。

Answer 2

1 先用白色盖住body
2 遍历网站的img 跟backgroundImage 统计数量 用100除这个数量 得到一个数‘i’ 这个数值就是进度条移动的一张图的距离
3 用imagesLoaded 判断每完成一张图的读取 就进度条增加刚才计算的距离
当load的图片数量 == 网页图片数量时候 就让进度条跟白色遮罩fadeOut
完成

Answer 3

你应该是需要这个 pace.js – 网页自动加载进度条插件
官网例子

Answer 4

一般这种网页的进度条都是伪进度条，我的博客也有这玩意儿，原理很简单，先用叠加随机数让进度慢慢加到95%，然在页面onload的时候讲进度加到100，也就是说网络不好的话，进度条可能会在95%卡很久。

当然网上也有很多监控真实进度的库，但是个人认为对于整个网页爱说，这只是锦上添花的东西，是否值得花费太多精力和资源做这件事，还需要考虑。

贴上我用的伪进度条代码：

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);

Answer 5

这个很好做的，不过要页面内容多一些效果才明显，思路如下：
1、在body的顶部写一个像你那样的进度条，定位和样式都调整好
2、在下面的内容中每隔一段距离就执行一个script脚本来控制进度条的宽度，同时改变上面显示的百分比数值
3、在window.onload函数的第一句就执行让这个进度条div隐藏或者移除这个节点。

这里面有几个注意的地方：
1、要想进度条有个好的进度展示体验，加上CSS过渡效果你必要的
2、进度条放在body顶部，要给定位和大小之类的，便于控制
3、script可以放在任何一个地方，这也是要每隔几个div或者其它节点就执行一下脚本使其内部的进度条宽度改变，具体隔多少得看你页面结构，有图片的就短一点，全是文本节点就隔开一点儿，这都可以的。
4、放在body中的script里面可别写window.onload哟，不然白这么玩儿了。

总之记住一句话页面的加载是从上往下执行的