Comment afficher un écran de chargement pendant le chargement du contenu du site
Je travaille sur un site qui contient tout un tas de Mp3 et d'images, et je voudrais afficher un GIF de chargement pendant que tout le contenu se charge.
Je n'ai aucune idée de comment y parvenir, mais j'ai le gif animé que je veux utiliser.
Des suggestions?
7 réponses
Généralement les sites qui le font en chargeant du contenu via ajax et en écoutant l'événement readystatechanged pour mettre à jour le DOM avec un GIF de chargement ou le contenu.
Comment Chargez-vous actuellement votre contenu?
Le code serait similaire à ceci:
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);
}
Il existe de nombreuses bibliothèques javascript tierces qui peuvent vous faciliter la vie, mais ce qui précède est vraiment tout ce dont vous avez besoin.
Vous avez dit que vous ne vouliez pas faire ça en AJAX. Alors que AJAX est idéal pour cela, il existe un moyen de montrer un DIV en attendant que l'ensemble <body> se charge. Il va quelque chose comme ceci:
<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>
L'événement onload ne se déclenchera pas tant que toute la page n'aura pas été chargée. Ainsi, le layer2 <DIV> ne sera pas affiché tant que la page n'aura pas terminé le chargement, après quoi onload se déclenchera.
Que diriez-vous avec jQuery? Simple...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
Et le HTML...
<div id="loader"></div>
Et CSS...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
Ensuite, dans votre chargeur div vous mettriez le GIF, et tout texte que vous voulez, et il disparaîtra une fois la page chargée.
Tout d'abord, configurez une image de chargement dans un div. Ensuite, obtenez l'élément div. Ensuite, définissez une fonction qui modifie le css pour rendre la visibilité "cachée". Maintenant, dans le <body>, mettez le onload au nom de la fonction.
Il y a en fait un moyen assez facile de le faire. Le code devrait être quelque chose comme:
<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);
}
Et dans le HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
J'ai fait quelque chose comme ça sur ma page et ça marche très bien.
Vous pouvez utiliser l'élément <progress> en HTML5. Voir cette page pour le code source et la démo en direct. http://purpledesign.in/blog/super-cool-loading-bar-html5/
Voici l'élément de progression...
<progress id="progressbar" value="20" max="100"></progress>
Cela aura la valeur de chargement à partir de 20. Bien sûr, seul l'élément ne suffira pas. Vous devez déplacer le script charge. Pour cela, nous avons besoin de JQuery. Voici un script jQuery simple qui démarre la progression de 0 à 100 et fait quelque chose dans un temps défini fente.
<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>
Ajoutez ceci à votre fichier HTML.
<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>
J'espère que cela vous donnera un début.
#méthode CSS Pure
Placer en haut de votre code (avant la balise d'en-tête)
<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>Et ceci en bas après tout autre code (sauf /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>Cela fonctionne toujours pour moi 100% du temps