I'm here again.
I have a page (index), which calls a javaScript, to put a graphic on the screen, I am getting it, however the graphic is taking a while to render and how much it does not render the screen is all white, , but I'm not getting it, I tried the solution:
How to make a screen loading before opening the site
But I did not succeed, in fact the gif appears and goes very fast from the screen and it turns white until loading the graphic.
My html
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="refresh" content="900">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- jQuery -->
<script src="js/jquery-3.3.1.js"></script>
<title>Idade</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="grafico" class="chart-container">
<canvas id="graficoIdade"></canvas> //Lugar de renderização do grafico
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script><!--Chart--><scriptsrc="js/graficoIdade.js"></script> //chamando o arquivo do grafico
</body>
</html>
My Js
$(document).ready(function(){
$.post({
url:"graficos/gerarGraficoIdade.php",
method: "POST",
cache: false,
success: function(idades){
var nome = [];
var idades = [];
var color = [];
var colorBorder = [];
$.each(JSON.parse(idades), function(i, obj){
nome.push([obj.nome]);
idades.push(obj.idade);
color.push('rgba(42, 99, 206, 0.2)');
colorBorder.push('rgba(42, 99, 206, 1)');
});
var ctx = document.getElementById("graficoIdade").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: nome,
datasets: [{
label: 'Idades',
data: idades,
backgroundColor: color,
borderColor: colorBorder,
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#2a63ce",
padding: 10
}
},
responsive: true,
}
});
},
error: function() {
}
})
}); '