javascript - pagina - Cómo mostrar una pantalla de carga mientras se carga el contenido del sitio
jquery (7)
Estoy trabajando en un sitio que contiene un montón de mp3 e imágenes, y me gustaría mostrar un GIF de carga mientras se carga todo el contenido.
No tengo idea de cómo lograr esto, pero sí tengo el GIF animado que quiero usar.
¿Alguna sugerencia?
Dijiste que no querías hacer esto en AJAX. Si bien AJAX es ideal para esto, hay una forma de mostrar un DIV mientras espera que se cargue todo el <body> . Es algo parecido a esto:
<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>
El evento de carga no se disparará hasta que se haya cargado toda la página. Entonces, la layer2 <DIV> no se mostrará hasta que la página haya terminado de cargarse, después de lo cual se iniciará la carga.
De hecho, hay una manera bastante fácil de hacer esto. El código debería ser algo así como:
<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);
}
Y en el HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
Hice algo así en mi página y funciona muy bien.
Puede usar <progress> elemento <progress> en HTML5. Consulte esta página para obtener el código fuente y la demostración en vivo. http://purpledesign.in/blog/super-cool-loading-bar-html5/
aquí está el elemento de progreso ...
<progress id="progressbar" value="20" max="100"></progress>
esto tendrá el valor de carga a partir de 20. Por supuesto, solo el elemento no será suficiente. Debe moverlo a medida que se carga el script. Para eso necesitamos JQuery. Aquí hay un script de JQuery simple que inicia el progreso de 0 a 100 y hace algo en el intervalo de tiempo definido.
<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>
Agregue esto a su archivo 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>
Espero que esto te dé un comienzo.
Normalmente, los sitios que lo hacen cargando contenido mediante ajax y escuchando el evento readystatechanged para actualizar el DOM con un GIF cargado o el contenido.
¿Cómo está cargando su contenido actualmente?
El código sería similar a esto:
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);
}
Hay muchas bibliotecas javascript de terceros que pueden hacer su vida más fácil, pero lo anterior es realmente todo lo que necesita.
¿Qué tal con jQuery? Un simple...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
Y el HTML ...
<div id="loader"></div>
Y CSS ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
Luego, en su div cargador, pondría el GIF y cualquier texto que quisiera, y se desvanecerá una vez que la página se haya cargado.
Primero, configure una imagen de carga en un div. A continuación, obtenga el elemento div. Luego, configure una función que edite el CSS para hacer que la visibilidad sea "oculta". Ahora, en <body> , ponga la carga en el nombre de la función.
Método #Pure css
Coloque esto en la parte superior de su código (antes de la etiqueta del encabezado)
<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>
Y esto en la parte inferior después de todo el otro código (excepto / etiqueta html)
<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>
Esto siempre me funciona el 100% del tiempo