1. 程式人生 > >html loading 頁面載入中(百分比)

html loading 頁面載入中(百分比)

$(function(){})是dom載入完畢後執行,window.onload是所有資源(圖片和js外部資源)載入完畢後執行。

 var Inter1 = null;
 //二選一
 $(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%');
    }