0

I am loading external js using $.getScript(url). Now until the js is loaded I want percentage loader (to show how much js is loaded) to be shown. How am I to do this.

$(document).on('click', 'div#play', function(){
        $(this).hide();
        $('div#stop').css('display', 'block');
        $('div#processing_load').show();
        var url = 'https://www.gstatic.com/swiffy/v5.4/runtime.js';
        $.getScript(url)
            .done(function(){
                $('div#processing_load').hide();
                $('#swiffycontainer').css('display', 'block');
                $('.landing-banner').css('display', 'none');

                stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
                stage.start();
                stage.setBackground(null); 
            })
    })

Here I want to show the loader before done with percentage.Thanks in advance. Any help/suggestion is welcome.

samjhana joshi
  • 1,995
  • 4
  • 35
  • 69

2 Answers2

0

I think you can't do it exactly ( show by progress bar) Why ? Because we don't know that how long time Loading is finished.

But you can use some tips to show progressbar : You need to know file size and can calculate the internet speed. 

time to load  = your file size / your internet speed ;
  => show progress bar when you begin to load .

To calculate the speed you can base on

  • Connection type (2G, 3G, WiFi, wired ) => get its speed
  • Calculate speed connection at the load time . You can read more in http://stackoverflow.com/questions/4583395/calculate-speed-using-javascript
  • Using Navigation Timing API: window.performance.*

Finally, Noways to show exactly with progress bar( That depends on networks).

LogPi
  • 706
  • 6
  • 11
0

Instead of getScript(), use ajax(), which is more powerful. It also allows you to parse xhr data to set a loading status, I edited your code (untested):

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function (evt) {
        //check if the length of the requested file is computable (if you generate the requested file using php, you require ob_start(); and ob_end_flush();)
            if (evt.lengthComputable) {
                //Calculate the percentage completed
                var percentComplete = Math.floor((evt.loaded / evt.total) * 100) + '%';
                //Do something with download progress
                $('div#processing_load').show().html(percentComplete);
            }
        }, false);
        return xhr;
    },
    url: 'https://www.gstatic.com/swiffy/v5.4/runtime.js',
    dataType: 'script',
    complete: function(xhr) {
        //you can use the xhr object to check for response codes 
        $('div#processing_load').hide();
        $('#swiffycontainer').css('display', 'block');
        $('.landing-banner').css('display', 'none');

        var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
        stage.start();
        stage.setBackground(null);
    }
});
Klaas Leussink
  • 2,208
  • 16
  • 23
  • What if `evt.lengthComputable` is `false`? Here is my attempt at calculating the progress of loading Jquery. https://jsfiddle.net/thoakun/7tjnbd8p/. I tried to change JQuery with other JS libraries, but `evt.lengthComputable` is always `false` and `evt.total` is 0. – bytrangle Sep 11 '21 at 16:32
  • When it is false, it is simply not computable, as the resource you are requesting does not give any information on its size. This usually happens when there is no `Content-length` header present. With PHP you can fix this using ob_start & ob_get_lentgh. See https://stackoverflow.com/questions/21737903/how-to-get-content-length-at-the-end-of-request – Klaas Leussink Sep 13 '21 at 07:56
  • Thank you for the answer. So is it correct to say that if I don't have control over the server, then there is no reliable way to compute the resource size? – bytrangle Sep 13 '21 at 09:49
  • 1
    I'd say yes, if the content lenght header is not available, the receiving party has no way to estimate the size PRIOR to loading it. – Klaas Leussink Sep 13 '21 at 11:29