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

Question

我找不到任何关于如何使用告诉您百分比的文本制作 javascript(或 jquery)进度条的有用信息。

我不想要插件，我只想知道它是如何工作的，以便我可以根据需要调整它。您如何预加载图像并获取预加载图像数量的变量。此外，如何根据已加载的图像数量更改 html/css 和/或调用函数？

Answer 1

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

图片也有对应的onerror和 onabort图片加载失败或下载中止(用户按下“x”按钮)时触发的事件。您还需要跟踪它们以及 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为清楚起见，现实世界的代码也应该处理它们。