使用JavaScript预加载器

Posted 2021-03-19

我遇到过这样的问题。我需要为页面制作一个百分比的预加载器，但我不知道如何。实际上，我不需要动画或简单的预加载器。我能做什么，有什么用？

window.onload = function() {
var images = document.images,
    imagesTotalCount    = images.length,
    imagesLoadedCount   = 0,
    preloader           = document.getElementById('js_preloader'),
    percDisplay         = document.getElementById('js_preload__percentage');
for(var i = 0; i < imagesTotalCount; i++) {
    image_clone = new Image();
    image_clone.onload = image_loaded;
    image_clone.onerror = image_loaded;
    image_clone.src = images[i].src;
}
function image_loaded() {
    imagesTotalCount++;
    percDisplay.innerhtml = (((100 / imagesTotalCount) * imagesLoadedCount) << 0) + '%';
    if(imagesLoadedCount >= imagesTotalCount) {
        setTimeout(function() {
            if(!preloader.classList.contains('done')) {
                preloader.classList.add('done');
            }
        }, 1500);
    }
}

};

此方法允许查看要下载的所有图像并计算百分比。但是，如何计算css和js文件的下载量呢？

答案

您可以使用相同的方法，但使用document.scripts和document.styleSheets集合。