自己动手制作基于jQuery的Web页面加载进度条插件

body{
        margin:0;
      }
      #progress {
        position:fixed;
        height: 2px;
        background:#2085c5;
        transition:opacity 500ms linear
      }
      #progress.done {
        opacity:0
      }
      #progress span {
        position:absolute;
        height:2px;
        -webkit-box-shadow:#2085c5 1px 0 6px 1px;
        -webkit-border-radius:100%;
        opacity:1;
        width:150px;
        right:-10px;
        -webkit-animation:pulse 2s ease-out 0s infinite;
      }

      @-webkit-keyframes pulse {
        30% {
          opacity:.6
        }
        60% {
          opacity:0;
        }
        100% {
          opacity:.6
        }
}

<div id="progress">
      <span></span>
</div>

$({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
          var percentage = Math.round(this.property);

          $('#progress').css('width', percentage+"%");

           if(percentage == 100) {
              $("#progress").addClass("done");//完成，隐藏进度条
            }
        }
});

$(function(){
NProgress.start();
})

$(window).load(function() {
  NProgress.done();
})

$(window).load(function() {
  alert("我是load")
})
$(function(){
 alert("我是document.ready")
})

$(window).load(function() {
  alert("我是load")
})

window.onload = function(){ ... }