javascript预加载器/进度/百分比

Question

我无法找到有关如何制作javascript(或jquery)进度条的任何好信息,其中包含告诉您百分比的文本.

我不想插件,我只想知道它是如何工作的,这样我就可以根据我的需要进行调整.如何预加载图像并获取预加载图像数量的变量.另外,如何根据已加载的图像数量更改html/css和/或调用函数？

Answer 1

<img>元素具有onload在图像完全加载后触发的事件.因此,在js中,您可以跟踪已加载的图像数量与使用此事件的剩余数量.

当图像无法加载或下载已中止时(用户按下"x"按钮),图像也会有相应的事件onerror和onabort事件.您还需要跟踪它们以及onload事件以正确跟踪图像加载.

补充答案:

纯js中的一个简单示例:

var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];
var loaded_images = 0;

for (var i=0; i<img_to_load.length; i++) {
    var img = document.createElement('img');
    img.src = img_to_load[i];
    img.style.display = 'hidden'; // don't display preloaded images
    img.onload = function () {
        loaded_images ++;
        if (loaded_images == img_to_load.length) {
            alert('done loading images');
        }
        else {
            alert((100*loaded_images/img_to_load.length) + '% loaded');
        }
    }
    document.body.appendChild(img);
}

上面的例子没有处理onerror或onabort清楚,但现实世界的代码也应该处理它们.