request-ladebalken.php
Quell Code
<style>
* {
padding: 0;
margin: 0;
}
span{
border:2px solid red;
padding:5px;
height:30px;
width:555px;
margin:6px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<main>
<h5>Klicke auf die Links mit der unterschiedlichen größen</h5>
<span data-wert="bild1.html">Datei 1 Laden ( ca 400kb )</span><br><br><br>
<span data-wert="bild2.html">Datei 2 Laden ( ca 8000 kb ) Dauert etwas !!</span><br><br><br>
<span data-wert="bild3.html">Datei 3 Laden ( ca 1 kb )</span>
</main>
<script>
$(document).ready(function() {
$("span").click(function() {
document.getElementById('body1').style.display='block';
g=Date.now();
link=$(this).data('wert');
$.ajax({
type: "POST",
url: link+'?=timestamp='+g,
success: function(data){
$('#seiteninhalt_laden').text('<p>'+data+'</p>');
document.getElementById('body1').style.display='none';
}
})
});
});
</script>
</body>
</html>