Estoy trabajando en un sitio que contiene un montón de mp3s e imágenes, y me gustaría mostrar un gif de carga mientras se carga todo el contenido.Cómo mostrar una pantalla de carga mientras el contenido del sitio carga
No tengo idea de cómo lograr esto, pero tengo el gif animado que quiero usar.
¿Alguna sugerencia?
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 actualmente su contenido?
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 un montón de 3 ª parte javascript bibliotecas que pueden hacer su vida más fácil, pero lo anterior es realmente todo lo que necesita.
Dijiste que no querías hacer esto en AJAX. Si bien AJAX es ideal para esto, hay una manera de mostrar un DIV mientras espera que se cargue todo el <body>. Es algo como 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. Por lo tanto, la layer2 <DIV> no se mostrará hasta que la página haya terminado de cargarse, después de lo cual se iniciará la carga.
En realidad, esta es una forma bastante sencilla de hacerlo. El código debe ser algo 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 código HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
que hice algo así en mi página y funciona muy bien.
Puede usar el 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 la carga a partir del 20. Por supuesto es suficiente costumbre sólo el elemento. 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 le dará un comienzo.
¿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 cargador div que pondría el GIF, y cualquier texto que quería, y se desvanecerá una vez que la página se ha 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 el <body>, ponga la carga en el nombre de la función.
método #Pure css
lugar esta en la parte superior de su código (antes de etiqueta de cabecera)
<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 el Abajo después de todo el otro código (exc EPT/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 funciona para mí 100% de las veces
¿Me podría decir qué bibliotecas 3 ª parte ? – Shekhar
@Shekhar [jQuery] (http://jquery.com/) es una biblioteca de JavaScript ampliamente utilizada. – Stian