JavaScript ajax: progressbar sanft bewegen?

Sarius87

Banned
Registriert
Mai 2016
Beiträge
888
moin, ich habe jetzt diesen code der jede Sekunde den wert der get.php als progressbar angibt :

HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="progressbar.css">
<link rel="stylesheet" href="animate.css">
 
<div id="inhalt" class="w3-container w3-blue w3-round animated">%</div>
 
<script language="javascript" type="text/javascript">
$(document).ready(function($){
function loadlink(){
	$.ajax({
		url: 'get.php',
		success: function(data){
		document.getElementById("inhalt").style.width=data; 
	 }});
}
 
loadlink();
setInterval(function(){
    loadlink()
}, 1000);
});
</script>

animate.css :

HTML:
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

progressbar.css : https://hastebin.com/avuxigohug.css


habe eigentlich die Attribute animated hinzugefügt damit sich der Balken sanft bewegt, doch er bewegt sich immer abrupt , doch wieso ? geht das nicht mit ajax ?
 
Ohne mich jetzt tiefer damit zu beschäftigen:

Normal schon, da die Animation ja sogar CSS ist und damit nicht direkt von Javascript gesteuert wird.

Aber auch CSS Animationen beginnen zu ruckeln, wenn eine lange Ausführungszeit von Javascript Code den Render-Update-Zyklus des Browser blockiert (solange Javascript abgearbeitet wird, kann der Browser nicht rendern). Die Ursache kann darin liegen, dass entweder dein Skript parallel zum Ajax Requests noch irgendetwas anderes zeitintensives in einer Schleife abarbeitet - oder dass vielleicht aus Versehen die globalen $.ajaxSetup() Parameter auf { async : false } gesetzt wurden und $.ajax() requests damit synchron laufen (also blocken).
 

Ähnliche Themen

Zurück
Oben