как узнать внешний js загружен или нет и поставить процентный загрузчик до этого времени

0

Я загружаю внешние js, используя $.getScript(url). Теперь, пока не загрузится js, я хочу, чтобы процентный загрузчик (чтобы показать, сколько js загружен) будет показан. Как мне это сделать.

$(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); 
            })
    })

Здесь я хочу показать загрузчик, прежде чем сделать с процентом. Спасибо заранее. Любая помощь/предложение приветствуются.

Теги:

2 ответа

0
Лучший ответ

Вместо getScript() используйте ajax(), который является более мощным. Он также позволяет анализировать данные xhr для установки статуса загрузки, я отредактировал ваш код (непроверенный):

$.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);
    }
});
0

Я думаю, вы не можете сделать это точно (показать по индикатору прогресса). Почему? Потому что мы не знаем, как долго закончится загрузка.

Но вы можете использовать некоторые подсказки для отображения progressbar: вам нужно знать размер файла и рассчитать скорость интернета.

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

Чтобы рассчитать скорость, на которой вы можете

  • Тип подключения (2G, 3G, WiFi, проводной) => получить свою скорость
  • Рассчитайте скорость соединения во время загрузки. Вы можете прочитать больше в http://stackoverflow.com/questions/4583395/calculate-speed-using-javascript
  • Использование API синхронизации навигации: window.performance. *

Наконец, Noways точно покажет индикатор выполнения (это зависит от сетей).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню