#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Italy
    Posts
    2
    Rep Power
    0

    Exclamation Javascript preloading process for multiple files


    Good evening,
    I want to extend the following script for a list of bin files, for a purpose described at this my topic: https://github.com/thinkpixellab/PxLoader/issues/22

    The script is this:

    Code:
    <script type="text/javascript">
    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)+" %");
    }, false);  
    req.addEventListener("load", function (e) {
      // THE RESOURCE IS LOADED
      progress.replaceWith("<div>Downloaded!</div>");
    });
    req.open("GET","resource.dat",true);                                                                                                                                            
    req.send();
    </script>
    which works fine for a single file, but I need a list of files to be downloaded in a unique process. I tried to modify it in this way:

    Code:
    <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('<span class="downloaded" title="8.9Mbytes mock file cached!">Downloaded!</span>');
          updateCode();
        });
    for (var x = 0; x < urlList.length; x++) {
        req.open("GET",urlList[x],true);
        req.send();
    }
      </script>
    but it doesn't seem to work, considering the amount of time to download 8.9MB (the total size of six bin files), as you can see here, http://grvsitest.altervista.org/media/progress.htm, compared to a unique file of 10MB. May be somebody could help me? Many thanks,

    Riccardo

    Edit 1

    This is my last attempt, but without success, adapted from this link: http://jsfiddle.net/8fbqy/

    Code:
    <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 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 req = new XMLHttpRequest(urlList);
    var progress = $('#download');
    function listenerForI( i ) {
    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();
    });
    req.open("GET","urlList[i]",true);
    req.send();
    }
    for( var i = 0; i < urlList.length; i++ ) {
    listenerForI( i );
    }
    </script>
    I'm not expert in javascript; I know only that it's required to attempt that result... The final result would be something like this:
    http://www.dhtmlgoodies.com/scripts/progress-bar/progress-bar.html
    (source: http://www.dhtmlgoodies.com/index.html?whichScript=progress_bar), but with a progression derived from the time to download that six files.

    Thanks for any help,

    Regards,

    Riccardo
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Italy
    Posts
    2
    Rep Power
    0

    Soved!


    forum.jquery.com/topic/progress-tag-in-html5-jquery-for-a-list-of-downloaded-files

IMN logo majestic logo threadwatch logo seochat tools logo