JavaScript的预加载/前进/个(javascript preloader/progress/

我无法找到关于如何使文字一个JavaScript（或jQuery的）进度条，告诉你个什么好的信息。

我不希望一个插件，我只是想知道它是如何工作，这样我可以适应我需要什么。 你如何预先载入图像，并得到一个变量预先加载图像的数量。 此外，你如何改变HTML / CSS和或调用函数的基础上，已装入图像的数量？

Answer 1:

<img>元件具有onload该触发一次的图像完全加载事件。 因此，在JS你可以跟踪已加载VS使用此事件剩余数量的图像数量。

图片也有相应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 preloader/progress/percentage