原生js实时控制网页NProgress 进度条加载,进度条按所有图片加载百分比真实前进

1. 引入nprogress的css及js,注意据说它依赖jquery,但我测试并不需要!!!

<link href="nprogress.css" rel="stylesheet" />
    <script src="nprogress.js"></script>

2. 在body标签结束之前插入js代码

NProgress.set(0.0);
    img = [];
    flag = 1;
    mulitImg = [];
    moutiple = document.getElementsByTagName('img');
    console.log(moutiple);
    for (value in moutiple) {
        if (moutiple[value].src != undefined)
            mulitImg.push(moutiple[value].src);
    }

    var imgTotal = mulitImg.length;
    for (var i = 0; i < imgTotal; i++) {
        img[i] = new Image();
        img[i].src = mulitImg[i];

        img[i].onload = img[i].onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
                NProgress.set(flag / imgTotal);
                flag++;
                if (flag == imgTotal) {
                    NProgress.done();
                }
            }
        };
    }






猜你喜欢

转载自blog.csdn.net/first236108/article/details/80598645