Load javascript function automatically into the body tag

Asked

Viewed 1,488 times

2

I need your help. I’m using the Loadgo Jquery and would like to know how to call a function to automatically load from the tag body, so that when you click on the page, it opens automatically. I tried to put the following way: body onload="execute('shield', 1, shieldInterval);"> but it didn’t 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>

js file.

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 !

javascript jquery body

  • Studying a little more, the onload event that is part of HTML5 does not automatically trigger the function. When using the onClick event, it worked. So the question is, does anyone know any event that does this trigger automatically ?

1 answer

1

You’re putting the scripts out of the tag body.

Put them inside the tag and use that line you had on your 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

  • The Script I hit as follows: Function() { $(execute ('Tauri', 1, tauriInterval)); }, This way, it rotates automatically. My next step is to combine the Loadgo with the Queryloader2 and finally make the two work together.

Browser other questions tagged javascript jquery body

You are not signed in. Login or sign up in order to post.