8

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

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

4

2 回答 2

7

<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为了清楚起见，但现实世界的代码也应该处理它们。

于 2013-03-12T06:48:49.787 回答
3

使用下面的东西怎么样：

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

于 2013-03-12T06:38:42.550 回答