Bonjour, j'essaie actuellement d'implanter une barre de progression sur mon site en utilisant le plug-in jQuery UI. En bref, lorsque l'utilisateur clique sur un lien, ça charge du contenu. Ma fonction fonctionne parfaitement, sauf que parfois le contenu met un peu de temps à charger, et je voudrais donc implanter une barre de progression pour faire classe. J'ai déjà testé les codes ci-desous mais ma barre reste à 0% tant que le navigateur rame puis passe directement à 100% quand le contenu est fini de charger. Pourquoi cela ?
Précision : la console n'affiche que le 100%...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
$('.link').click(function() {
var destination = $(this).attr('data-destination'); //Récupération du contenu à afficher
$("#progressbar").progressbar({ value: 0 }); //initialisation de la barre de progression
$.ajax({
xhr: function()
{
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
//Do something with download progress
console.log(percentComplete); //DEBUG[ohwell]
$("#progressbar").progressbar({ value: percentComplete });
}
}, false);
return xhr;
},
type: 'POST',
cache:'false',
url: 'pages/'+destination+'.php',
data: {},
success: function(html){
$('#main').html(html);
}
});
Précision : la console n'affiche que le 100%...