jQuery page HTML entière charge avec spinner
j'essaie quelque chose de simple -- faire un script jQuery qui attendra de montrer toute la page, y compris toutes les DIVs, le texte et les images. Pendant le chargement de la page, au lieu d'Afficher des parties de la page, je voudrais afficher une image gif filante, et lorsque la page entière est chargée, nous pouvons effacer le contenu de la page dans la fenêtre du navigateur.
Il y a beaucoup de scripts à charger avec une requête ajax dans un conteneur DIV -- mais c'est différent. Cela montrera un GIF tournant alors qu'une page HTML est en train de se charger. Toute aide est appréciée
ce type de script ne fonctionne que sur les requêtes ajax
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
4 réponses
$(document).ready(...) tire dès que le DOM est chargé. C'est trop tôt. Vous devez utiliser $(window).on('load', ...):
JavaScript:
$(window).on('load', function(){
$('#cover').fadeOut(1000);
})
CSS:
#cover {
background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
HTML:
<div id="cover"></div>
<!-- rest of the page... -->
regardez ce jsFiddle: http://jsfiddle.net/gK9wH/9/
Je couvrirais la page entière avec une superposition, puis je supprimerais la superposition une fois la page chargée. Vous pouvez modifier cela pour afficher également un chargement.gif si vous le souhaitez. Voici un exemple:
HTML
<body>
<div id="container">
<h2>Header</h2>
<p>Page content goes here.</p>
<br />
<button id="remove_overlay">Remove Overlay</button>
</div>
</body>
CSS
#container{padding:20px;}
h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:2305px !important; /*change to YOUR page height*/
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}
jQuery:
$(document).ready(function () {
// Set a variable that is set to the div containing the overlay (created on page load)
var page_overlay = jQuery('<div id="overlay"> </div>');
// Function to Add the overlay to the page
function showOverlay(){
page_overlay.appendTo(document.body);
}
// Function to Remove the overlay from the page
function hideOverlay(){
page_overlay.remove();
}
// Show the overlay.
$(showOverlay);
});
});
$(document).ready(function () {
$(hideOverlay);
});
vous aurez besoin de modifier cela de sorte qu'il charge la superposition dès que la page est demandée (modifier le $(showOverlay); appeler pour qu'il démarre avant que le document soit prêt.
voici un simple fonctionnement jouer avec un bouton pour supprimer la superposition. Vous devriez être en mesure d'aller à partir de là :) http://jsfiddle.net/3quN5/
je pense que le meilleur moyen serait d'avoir une div 'cover' qui couvrira toute la page pendant qu'elle se charge. Il serait opaque, et contiendrait votre GIF.
L'exemple suivant ne puis cacher la div une fois la page chargée:
$(document).ready(function() {
// Hide the 'cover' div
});
Les rendrait le div de la taille de la page:
.div{
height:100%;
width:100%;
overflow:hidden;
}
tout D'abord, voulez-vous dire tout ce qui se trouve entre les étiquettes? La meilleure façon de faire le cadeau de rotation est d'ajouter une classe qui définit le gif comme aucune répétition et centré. La suppression de la classe lorsque la page est prête à être affichée.
$('body').addClass('loading')
$('body').removeClass('loading')
C'est toujours la meilleure technique parce que si vous soumettez quelque chose puis essayer d'ajouter le gif à travers un ajout DOM certains navigateurs ne le feront pas parce que la page a été soumise.