页面加载loading事件

$(function(){})是dom加载完毕后执行，window.onload是所有资源（图片和js外部资源）加载完毕后执行

     var Inter1 = null;
     var widthNow = 0;
     //二选一
     $(function () {
          //DOM加载完毕后执行
          Inter1 = setInterval('addBar()', 100);
     })
     
     document.addEventListener('DOMContentLoaded', function (event) {
          //DOM加载完毕后执行
          Inter1 = setInterval('addBar()', 100);
    


//二选一
window.onload = function () {
    //外部资源加载完毕后执行
    finishBar();
}
 
    window.addEventListener('load', function (event) {
        //外部资源加载完毕后执行
        finishBar();
    });



//启动定时器
    function addBar() {
        if (widthNow == 99) {
            return false;
        }
        widthNow++;
        $('#txtBar').text(widthNow + "%");
        $('#loadingBar').width(widthNow + '%');
    }
//取消定时器
    function finishBar() {
        clearInterval(Inter1);
        $('#txtBar').text("100%");
        $('#loadingBar').width('100%');
    }

如果需要自定义时长的话可以这样来写

    var Inter1 = null;
     var widthNow = 0;
 
     $(function () {
          //DOM加载完毕后执行
          <!--setInterval来计算需要的时长-->
          Inter1 = setInterval('addBar()', 100);
     })
     
      window.addEventListener('load', function (event) {
        //外部资源加载完毕后执行
        //定义变量
        var  loading = true
        finishBar();
    });
    
   //启动定时器
    function addBar() {
        if (widthNow == 99) {
            if(loading){
                finishBar()
                return false;
            }
        }
        widthNow++;
        $('#txtBar').text(widthNow + "%");
        $('#loadingBar').width(widthNow + '%');
    }
//取消定时器
    function finishBar() {
        clearInterval(Inter1);
        $('#txtBar').text("100%");
        $('#loadingBar').width('100%');
    }   

转载自 blog.csdn.net/z5976749/ar…