Load javascript function automatically into body tag

2

I need your help. I'm using LoadGo JQuery and would like to know how do I call a certain function to load automatically from the body tag, so that when you click the page, it opens automatically. I tried to put it like this: body onload="execute('shield', 1, shieldInterval);"> but did not work. What should I do?

Follow the example:

  

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>
  

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

});

Thanks for the help!

    
asked by anonymous 07.02.2016 / 02:39

1 answer

1

You are putting the scripts out of the body tag.

Put them inside the tag and use this line you had in the body, but after them, like this:

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

This way they will be loaded when the page runs this line of code. And how is the last gives the behavior you want

    
07.02.2016 / 09:37