3

Criei um código com o javascript, mas não rodou muito bem. Estou criando um loading da página, mas não carrega a barra de carregamento e o evento que programei nunca termina. Ficou no laço infinito:

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;
function start(){
    if((progresso + 1) < maximo){
      progresso=progresso+1;
      document.getElementById("pg").value=progresso;
      setTimeout("start();",80);
    }
}
#barra_progresso
{
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}
#carregador_pai
{
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}
#carregador_fundo
{
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}
#carregador
{
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}
<div id="carregador_pai">
  <div id="carregador">
    <div align="center">Aguarde carregando...</div>
    <div>
      <center> 
        <p>
          <progress id="pg" max="100"></progress>       
        </p>
      </center>
    </div>
  </div>
</div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" height="720" width="1024"  />

2
  • Tens uma parte grande do JavaScript como comentário (ou seja desativado). A declaração dessa variável _loadTimer que o erro refere está lá... porque não "des-comentas" esse código?
    – Sergio
    18/02/2017 às 15:48
  • Desculpe, inseri outro código! Desconsidere somente.
    – user67202
    18/02/2017 às 17:01

1 Resposta 1

1

Primeiro, a função start não é chamada em momento algum no seu código, então ela nem começa a executar. Assumindo que o "carregamento" deva iniciar junto com a página, a chamarei através do evento onload. Outro erro no código é invocar a função "start();" com setTimeout. A notação com string funciona quando você fará a chamada através de uma propriedade no HTML, como ocorre no evento onload. Nesse caso, você está trabalhando diretamente no JavaScript, então basta passar apenas o nome da função, sem aspas. Finalmente, considerando que a barra de progresso deve sumir após finalizar a contagem, inseri na função start a cláusula else, ocultando a barra de progresso assim que a contagem finalizar.

Aliás, não faz muito sentido fazer:

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;

Você estaria declarando as duas variáveis duas vezes, sendo que a segunda sobrescreveria a primeira. Você pode simplesmente fazer:

var progresso = new Number(0);
var maximo = new Number(100);

Ou ainda

var progresso = 0;
var maximo = 100;

Que nesse caso funciona perfeitamente.

Espero que seja esse o problema. Se não for, edite a pergunta e tente ser mais claro quanto sua necessidade.

var progresso = 0;
var maximo = 100

function start() {
  if ((progresso + 1) < maximo) {
    progresso = progresso + 1;
    document.getElementById("pg").value = progresso;
    setTimeout(start, 80);
  } else {
    document.getElementById("carregador_pai").style.display = 'none';
  }
}
#barra_progresso {
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}

#carregador_pai {
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}

#carregador_fundo {
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}

#carregador {
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}
<body onload="start()">
  <div id="carregador_pai">
    <div id="carregador">
      <div align="center">Aguarde carregando...</div>
      <div>
        <center>
          <p><progress id="pg" max="100"></progress> </p>
        </center>
      </div>
    </div>
  </div>
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" height="720" width="1024" />
</body>

4
  • agradeço pelo esforço de responder mas acabei me confundindo e colocando o código de um colega, e o meu está na revisão atual da publicação.
    – user67202
    18/02/2017 às 21:04
  • sim no caso a imagem deveria aparecer somente após o final do carregamento.
    – user67202
    18/02/2017 às 21:06
  • 1
    Leia minha resposta que possivelmente conseguirá resolver seu problema.
    – Woss
    18/02/2017 às 21:06
  • muito útil suas dicas. Sua solução está 10. Parabéns.
    – user67202
    18/02/2017 às 21:07

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