Progress tag in HTML5 & jQuery for a list of downloaded files
Good afternoon, I need to extend a script (which works fine for a single file) for multiple files.
Here there is its demo.
I need to pass the list of files shown in the attached image (*), to make a preloader that notifies the waiting time for loading the whole page. I'm new in JavaScript and jQuery;
I found this resource and I tried to adapt the code in this way but without success:
<script type="text/javascript">
var progressCode = $('#progressCode');
var progressContainer = $('#progressContainer');
function updateCode () {
progressCode.text(progressContainer.html());
}
updateCode();
var totalBytes = 8856432; // CHANGE ME WITH THE SIZE OF THE RESOURCE
var req = new XMLHttpRequest();
var urlList = new Array("source/surface_html/BG_0_colorBinary.bin", "source/surface_html/BG_0_coordBinary.bin", "source/surface_html/BG_0_normalBinary.bin", "source/cartoon_html/BG_0_colorBinary.bin", "source/cartoon_html/BG_0_coordBinary.bin", "source/cartoon_html/BG_0_normalBinary.bin");
var progress = $('#download');
progress.attr("max", totalBytes);
req.addEventListener("progress", function (e) {
progress.attr("value", e.loaded).text(Math.floor(100*e.loaded/totalBytes)+" %");
updateCode();
}, false);
req.addEventListener("load", function (e) {
// THE RESOURCE IS LOADED
progress.replaceWith('Downloaded!');
updateCode();
});
for (var x = 0; x < urlList.length; x++) {
req.open("GET","urlList[x]",true);
req.send();
}
</script>
How can I pass that list (for example of six bin files), instead of the one only file (
resource.dat
, in the code of that web page):
- <script type="text/javascript">
- var progressCode = $('#progressCode');
- var progressContainer = $('#progressContainer');
- function updateCode() {
- progressCode.text(progressContainer.html());
- }
- updateCode();
- var totalBytes = 10000000; // CHANGE ME WITH THE SIZE OF THE RESOURCE
- var req = new XMLHttpRequest();
- var progress = $('#download');
- progress.attr("max", totalBytes);
- req.addEventListener("progress", function (e) {
- progress.attr("value", e.loaded).text(Math.floor(100 * e.loaded / totalBytes) + " %");
- updateCode();
- }, false);
- req.addEventListener("load", function (e) { // THE RESOURCE IS LOADED
- progress.replaceWith('<span class="downloaded" title="10Mbytes mock file cached!">Downloaded!</span>');
- updateCode();
- });
- req.open("GET", "resource.dat", true);
- req.send();
- </script>
Many thanks
for your help and attention.
Greetings,
Riccardo
(*) Attached image: