2

Preciso da ajuda de vocês. Estou usando o LoadGo JQuery e gostaria de saber como faço para chamar determinada função a carregar automaticamente a partir da tag body, de forma que quando clicar na pagina, ela abra automaticamente. Eu tentei colocar da seguinte forma: body onload="execute('shield', 1, shieldInterval);"> mas não funcinou. O que devo fazer ?

Segue o exemplo :

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="js/libs/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>




    <!--   NAO FUNCIONOU DESTA MANEIRA
       <body onload="execute('shield', 1, shieldInterval);">
    -->


    <body>
    <div class="container">

        <img id="shield" src="logos/shield.png" alt="shield Logo" class="img-responsive logo" style="margin: 0 auto;" />
            <div class="row" style="margin-top:10px;">
              <div class="col-md-12 text-center">
                <div id="progress-1" style="margin-bottom:10px;font-size:32px; font-family:'Campton ExtraBold Italic'; color: #000000; opacity:0"><cite>0 %</cite></div>
              </div>
                <center><button class="btn btn-primary" onclick="execute('shield', 1, shieldInterval);">
                    Start
                </button></center>
            </div>
     </div>

  </body>

  <script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/libs/bootstrap.min.js"></script>

  <script type="text/javascript" src="js/loadgo/loadgo.js"></script>
  <script type="text/javascript" src="js/main_loadgo.js"></script>

</html>

arquivo.js

var shieldInterval;

function execute (_id, index, interval) {
  $('#msg-' + index).animate({
    'opacity': '0'
  });

  $('#progress-' + index).animate({
    'opacity': '1'
  });

  var p = 0;
  $('#' + _id).loadgo('resetprogress');
  $('#progress-' + index).html('0%');
  window.setTimeout(function () {
    interval = window.setInterval(function (){
      if ($('#' + _id).loadgo('getprogress') == 100) {
        window.clearInterval(interval);
        $('#msg-' + index).animate({
          'opacity': '2'
        });
        $('#progress-' + index).animate({
          'opacity': '0'
        });
      }
      else {
        var prog = p*1;
        $('#' + _id).loadgo('setprogress', prog);
        $('#progress-' + index).html(prog + '%');
        p++;
      }
    }, 150);
  }, 300);
}

$(window).load(function () {

  $("#shield").load(function() {

  //referencia principal da chamada, olhar em <img id="shield" ... dentro do index.html
  $('#shield').loadgo();
  }).each(function() {
    if(this.complete) $(this).load();
  });

});

Agradeço pela a ajuda !

1
  • Estudando um pouco mais, o evento onLoad que faz parte do HTML5 não dispara automaticamente a função. Ao utilizar o evento onClick, funcionou. Entao a pergunta é, alguém conhece algum evento que faça este disparo automaticamente ?
    – user33011
    7/02/2016 às 3:18

1 Resposta 1

1

Estás a colocar os scripts fora da tag body.

Coloca-os dentro da tag e usa essa linha que tinhas no body, mas depois deles, assim:

<script>execute('shield', 1, shieldInterval);</script>

Dessa maneira eles vão ser carregados quando a página correr essa linha de código. E como é a ultima dá o comportamento que pretendes

1
  • O Script eu acertei da seguinte forma : function() { $(execute ('tauri', 1, tauriInterval)); }, Desta forma, ele roda automaticamente. Meu proximo passo é combinar o LoadGO com o QueryLoader2 e enfim fazer os dois funcionarem em conjunto.
    – user33011
    19/02/2016 às 3:51

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