Ich arbeite an einer Seite, die eine ganze Reihe von MP3s und Bildern enthält, und ich möchte ein Lade-GIF anzeigen, während der ganze Inhalt geladen wird.Wie man einen Ladebildschirm anzeigt, während der Inhalt geladen wird
Ich habe keine Ahnung, wie dies zu erreichen ist, aber ich habe das animierte GIF, das ich verwenden möchte.
Irgendwelche Vorschläge?
In der Regel Websites, die dies tun, indem Sie Inhalt über AJAX laden und das Ereignis readystatechanged hören, um das DOM mit einem Laden GIF oder den Inhalt zu aktualisieren.
Wie laden Sie gerade Ihren Inhalt?
Der Code würde etwa wie folgt aussehen:
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
Es gibt viele 3rd-Party-JavaScript-Bibliotheken, die das Leben einfacher machen können, aber die oben ist wirklich alles, was Sie brauchen.
Sie sagten, Sie wollten dies nicht in AJAX tun. Während AJAX dafür großartig ist, gibt es eine Möglichkeit, ein DIV zu zeigen, während man auf das Laden des gesamten <body> wartet. Es geht ungefähr so:
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
Das Onload-Ereignis wird nicht ausgelöst, bis die gesamte Seite geladen hat. So wird die Schicht 2 <DIV> nicht angezeigt, bis die Seite fertig geladen ist, nach der Onload ausgelöst wird.
Es gibt eigentlich eine ziemlich einfache Möglichkeit, dies zu tun.
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
Und im HTML: Der Code sollte so etwas wie
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
Ich habe so etwas auf meiner Seite und es funktioniert super.
Sie können <progress> Element in HTML5 verwenden. Sehen Sie diese Seite für Quellcode und Live-Demo. http://purpledesign.in/blog/super-cool-loading-bar-html5/
hier ist der Fortschritt Element ...
<progress id="progressbar" value="20" max="100"></progress>
dies den Belastungswert von 20. Natürlich beginnend nur das Element wird nicht ausreichen. Sie müssen es beim Laden des Skripts verschieben. Dafür brauchen wir JQuery. Hier ist ein einfaches JQuery-Skript, das den Fortschritt von 0 bis 100 startet und etwas in einem definierten Zeitfenster ausführt.
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
Fügen Sie dies zu Ihrer HTML-Datei hinzu.
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
Hoffe, das wird Ihnen einen Anfang geben.
Wie wäre es mit jQuery? Eine einfache ...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
Und die HTML ...
<div id="loader"></div>
und CSS ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
dann in Ihren Loader div Sie die GIF setzen würde, und jeder Text, den Sie wollen, und es wird ausgeblendet, sobald die Seite geladen wurde.
Zuerst stellen eine Lade Bild in einem div auf. Als nächstes holen Sie sich das div-Element. Stellen Sie dann eine Funktion ein, die die CSS so bearbeitet, dass die Sichtbarkeit "versteckt" wird. Nun, in der <body>, legen Sie den Onload auf den Funktionsnamen.
#Pure css Methode
Dieses an der Spitze des Codes (vor Header-Tag)
<style> .loader {
position: fixed;
background-color: #FFF;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
}
</style><div class="loader">
Your Content For Load Screen
</div>Und dies auf Unten nach allen anderen Codes (exc ept/html-Tag)
<style>
.loader {
-webkit-animation: load-out 1s;
animation: load-out 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
@keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>Dies funktioniert immer für mich 100% der Zeit
Können Sie mir bitte sagen, was 3rd-Party-Bibliotheken ? – Shekhar
@Shekhar [jQuery] (http://jquery.com/) ist eine weit verbreitete JavaScript-Bibliothek. – Stian