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 !
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 ?
– user33011