javascript – 如何在页面加载时显示正在运行的进度栏

我想显示一个正在运行的进度栏,而我的页面正在加载LINK THIS LINK,在我的页面。
我在我的例子中使用了一个简单的加载图像,但我想在一个运行的进度条转换它。这里是我的代码:

Html

<div id="loading">
   <img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt"><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

Css

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

脚本

$(window).load(function() {
    alert("hi");
    $('#loading').hide();
});

任何人都有任何想法如何做到这一点?我会真的很感激这个!
这是我的Fiddle Check It

最佳答案
有一些插件已经这样做,如nprogress.js,pace.js和这个Youtube-like one.如果你想做自己你可以看看他们的代码里面。

转载注明原文:javascript – 如何在页面加载时显示正在运行的进度栏 - 代码日志