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

我很难找到关于如何使用文本告诉你百分比的javascript（或jquery）进度条的任何好信息。

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

Answer 1

元素有一个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 

上面的例子不清楚处理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进度元素：

 
 
Progress: 0%
   

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