Mostrar pagina luego de que ésta está completamente cargada

LunaLuna · #1 (**permalink**) 09/06/2012, 08:11

Hola a todos!

Necesito hacer que mis páginas se caguen completamente antes de que el usuario las pueda ver, y así evitar que las imágenes en la pagina se carguen de a pedazos.

No se NADA de javascript!

Agradezco cualquier ayuda!!

Gracias y saludos a todos!

emprear · #2 (**permalink**) 09/06/2012, 10:23

En primer lugar , Bienvenido/a a FDW @LunaLuna

Hay soluciones más avanzadas, pero dado tus pocos conocimientos te doy una más simple

inmediatamente despues del tag body
inserta una capa, por ejemplo
<div id="precargar">
</div>

Posteriormente en esa capa insertá tags <img> para cada imagen que quieras se cargue previamente.
Finalmente, en tu css dale a la capa precarga los siguientes valores
#precargar{
display: none;
}

De esa manera las imágenes ya va a estar disponibles para cuando las muestres más adelante en el documento

Desde ya que este ó cualquier otro procedimiento para precargar las imágenes va a resultar en una demora que va a afectar a todo el documento.

Saludos

IXtremeLT · #3 (**permalink**) 09/06/2012, 22:31

Te recomiendo que evites que el usuario espere a que todas las imagenes carguen a menos que sean indispensables por que si alguna de ellas llegara a fallar entonces la pagina ya no mostraria nada lo mejor seria que te conformes con que se carguen todos los elementos usando un simple window.onload pero antes poner como dice el compañero de arriba pero sin las imagenes para que al menos coloques un "Cargando...".

IXtremeLT · #4 (**permalink**) 09/06/2012, 23:23

Te dejo un pequeño script que hice, solo colocalo hasta abajo del contenido de <body>

Código Javascript:

Ver originalvar obj_contain = document.getElementById('contain');
var obj_loadingMessage = document.getElementById('loadingMessage'); 
function loading()
{
    var images = document.images;
    for (var i = 0; i<images.length; i++) {
        var image = images[i];
        if (image.complete) {
            if ((i+1)==images.length) {
                obj_loadingMessage.style.display = 'none';
                obj_contain.style.display = 'block';
            }
        } else {
            setTimeout(loading, 30);
            return false;
        }
    }
}
obj_contain.style.display = 'none';
obj_loadingMessage.style.display = 'block';
loading();

Debes tener la siguiente estructura como ejemplo

Código HTML:

Ver original<html>
<head>...</head>
<body>
    <div id="contain" style="display:none">
         ...Contenido de la pagina...
    </div>
    <div id="loadingMessage" style="display:none">
        <h2>Cargando...</h2>
    </div>
    <script type="text/javascript">
var obj_contain = document.getElementById('contain');
var obj_loadingMessage = document.getElementById('loadingMessage'); 
function loading()
{
    var images = document.images;
    for (var i = 0; i<images.length; i++) {
        var image = images[i];
        if (image.complete) {
            if ((i+1)==images.length) {
                obj_loadingMessage.style.display = 'none';
                obj_contain.style.display = 'block';
            }
        } else {
            setTimeout(loading, 30);
            return false;
        }
    }
}
obj_contain.style.display = 'none';
obj_loadingMessage.style.display = 'block';
loading();
    </script>
</body>
</html>

Saludos.