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，但现实代码也应该处理它们。

Answer 2

如何使用以下内容：

$('#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

您可能还想尝试HTML5进度元素：

<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

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

2 个答案:

补充答案：