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

javascript preloader/progress/percentage

提问by EmmaGamma

I'm having trouble finding any good information on how to make a javascript(or jquery) progress bar WITH text that tells you the percentage.

我无法找到有关如何制作带有文本的 javascript（或 jquery）进度条来告诉您百分比的任何好的信息。

I don't want a plug in, I just want to know how it works so that I can adapt it to what I need. How do you preload images and get a variable for the number of images that are preloaded. Also, how do you change html/css and-or call a function, based on the number of images that are loaded already?

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

采纳答案by slebetman

<img>elements have an onloadevent that fires once the image has fully loaded. Therefore, in js you can keep track of the number of images that have loaded vs the number remaining using this event.

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

Images also have corresponding onerrorand onabortevents that fire when the image fails to load or the download have been aborted (by the user pressing the 'x' button). You also need to keep track of them along with the onloadevent to keep track of image loading properly.

当图像加载失败或下载被中止（通过用户按下“x”按钮）时，图像也有相应的onerror和onabort触发的事件。您还需要跟踪它们以及onload事件以正确跟踪图像加载。

---

---

Additional answer:

补充回答：

A simple example in pure js:

纯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);
}

The example above doesn't handle onerroror onabortfor clarity but real world code should take care of them as well.

上面的例子没有处理onerror或onabort为了清楚起见，但现实世界的代码也应该照顾它们。

回答by defau1t

What about using something below:

使用下面的东西怎么样：

$('#btnUpload').click(function() {
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 0;

    var load = function() {
        loaded += 1;
        bar.value = loaded;

        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: ");
        $('#progUpdate').empty().append(loaded + "% loaded");

        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

    var beginLoad = setInterval(function() {
        load();
    }, 50);

});

JSFIDDLE

JSFIDDLE

You might also want to try HTML5 progress element:

您可能还想尝试 HTML5 progress 元素：

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section> 

http://www.html5tutorial.info/html5-progress.php

http://www.html5tutorial.info/html5-progress.php