3

Algumas vezes vejo barras de carregamento com percentagem em sites que creio eu, sobrescrevem o comportamento padrão da página ao carregar (tela branca até que o conteúdo esteja pronto). Existem alguns plugins jQuery que fazem isso, mas quero entender exatamente como funciona esse processo com JS puro.

Eu me baseio em quê pra descobrir o percentual de carregamento em uma página?

4
  • neste caso, a requisição para o servidor é um download de dados? ou alguma rotina intensiva? Commented 19/02/2015 às 14:20
  • github.hubspot.com/pace/docs/welcome Se você acessar essa página, vai ver que de alguma forma o plugin jQuery detecta o progresso de carregamento da página e o representa graficamente. É isso que quero saber como funciona.... Commented 19/02/2015 às 15:51
  • 3
    é possivel fazer com XMLHttpRequest.addEventListener("progress", function, false), porém a pagina precisa expor o seu trabanho no Header atraves da propriedade Content-Length. Commented 19/02/2015 às 16:03
  • Interessante o que disse @TobyMosque. Vou ler mais à respeito... Commented 20/02/2015 às 10:20

1 Resposta 1

2

Usando como base o plugin pace.js (https://github.com/HubSpot/pace), ele utiliza diversos métodos para detectar o percentual de carregamento da página:

    • Requisições Ajax:
        - O plugin verifica as requisições, calculando o percentual de cada uma dependendo do seu tipo:
          Se a requisição for um XMLHttpRequest ele utiliza o evento "progress", que retorna um objeto com o tamanho do arquivo sendo baixado e quanto ja foi concluído, se estiver disponível o Content-Length no Header da requisição de resposta. Além de também verificar os eventos "load", "abort", "timeout" e "error" para determinar se a requisição terminou.

          request.addEventListener('progress', function(evt) {
                //Verifica se Content-Length foi declarado no Header de resposta
                if (evt.lengthComputable) {
                  //Calcula a porcentagem de acordo com o quanto já foi baixado.
                  return _this.progress = 100 * evt.loaded / evt.total;
                } else {
                  //Se não há Content-Length retorna uma porcentagem sintética.
                  return _this.progress = _this.progress + (100 - _this.progress) / 2;
                }
              }, false);
          

          Se o tipo de requisição for um WebSocket ele verifica os eventos "error" e "open" para determinar se a requisição terminou.

          SocketRequestTracker = (function() {
            function SocketRequestTracker(request) {
              var event, _j, _len1, _ref2,
                _this = this;
              this.progress = 0;
              _ref2 = ['error', 'open'];
              //Registra listener aos eventos acima para determinar quando conexão estiver estabelecida, ou não.
              for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                event = _ref2[_j];
                request.addEventListener(event, function() {
                  return _this.progress = 100;
                }, false);
              }
            }
          
            return SocketRequestTracker;
          })();
          

    • Documento HTML:
        - O plugin utiliza o document.readystate para determinar o estado no qual o documento está ("loading", "interactive", "complete") e atribui uma porcentagem para cada.

        DocumentMonitor = (function() {
          //Determina porcentagens para cada estado de document.readyState.
          DocumentMonitor.prototype.states = {
            loading: 0,
            interactive: 50,
            complete: 100
          };
        
          function DocumentMonitor() {
            var _onreadystatechange, _ref2,
              _this = this;
            //Verifica document.readystate e atribui valor ao estado atual da página
            this.progress = (_ref2 = this.states[document.readyState]) != null ? _ref2 : 100;
            _onreadystatechange = document.onreadystatechange;
            //Nas mudanças de estado atualiza o valor da porcentagem
            document.onreadystatechange = function() {
              if (_this.states[document.readyState] != null) {
                _this.progress = _this.states[document.readyState];
              }
              return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0;
            };
          }
        
          return DocumentMonitor;
        })();
        

    • Lag no Loop de Eventos:
        - O plugin verifica, através do lag no loop de eventos, se existe código javascript sendo executado e calcula um porcentagem relativa ao lag.

        EventLagMonitor = (function() {
          function EventLagMonitor() {
            var avg, interval, last, points, samples,
              _this = this;
            this.progress = 0;
            avg = 0;
            samples = [];
            points = 0;
            last = now();
            //Utiliza um timer para calcular o Lag no loop de eventos do javascript
            interval = setInterval(function() {
              var diff;
              //Calcula a diferença entre o tempo de execução determinado para o Timer (50ms) e o tempo real de execução
              diff = now() - last - 50;
              last = now();
              samples.push(diff);
              if (samples.length > options.eventLag.sampleCount) {
                samples.shift();
              }
              //Calcula a amplitude media a partir dos Lag's salvos
              avg = avgAmplitude(samples);
              //Verifica se a amplitude dos Lag's está acima do limite na execução do javascript
              if (++points >= options.eventLag.minSamples && avg < options.eventLag.lagThreshold) {
                _this.progress = 100;
                return clearInterval(interval);
              } else {
                //Se estiver, calcula a porcentagem a partir dessa amplitude.
                return _this.progress = 100 * (3 / (avg + 3));
              }
            }, 50);
          }
        
          return EventLagMonitor;
        })();
        

    • Elementos HTML(opcional):
        - O plugin verifica a existência de certos elementos predeterminados usando o document.querySelector.

        //De acordo com a documentação - Define as classes/id's a serem verificados pelo pace.js
        paceOptions = {
         elements: {
          selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
         }
        }
        


        //Para verificar a existência dos elementos no documento
        ElementTracker = (function() {
          function ElementTracker(selector) {
            this.selector = selector;
            this.progress = 0;
            this.check();
          }
        
          ElementTracker.prototype.check = function() {
            var _this = this;
            if (document.querySelector(this.selector)) {
              return this.done();
            } else {
              return setTimeout((function() {
                return _this.check();
              }), options.elements.checkInterval);
            }
          };
        
          ElementTracker.prototype.done = function() {
            return this.progress = 100;
          };
        
          return ElementTracker;
        })();
        

    Você deve fazer log-in para responder a esta pergunta.

    Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .