Imprimir Página - detectar carga completa de pagina web en javascript

Título: detectar carga completa de pagina web en javascript
Publicado por: WHK en 7 Junio 2011, 09:32 am

Hola, actualmente estaba haciendo un proyecto donde con jquery estaba usando document ready para detectar el término de la carga de la página web y comenzar a cargar una galería de imágenes.

El problema es que son casi 20 imágenes y en total son como 3mb y algunas conexiones bajas como las de usb modem tardan muchisimo en cargar y por lo tanto las imágenes del diseño de la web no terminan de cargar tampoco hasta que carga la galería.

Esto me da a entender que document ready al igual que onload desde body me indica el término de carga del DOM pero no del documento completo,... o sea..
Quiero detectar desde javascript cuando termina de cargar todos los recursos de la web incluyendo imágenes, hojas de estilo, todo y después comenzar a cargar la galería para que no me desordene todo el diseño.

No me sirve darle un id a cada imágen, hay por ahi un plugin que a todos los tags de img y src les da un onload y los cuenta para detectar cuando todo carga pero no detecta las hojas de estilo, por lo tanto no es una detección real.

Alguien tiene alguna idea? en flash funciona perfectamente pero quería buscar el reemplazo para jquery porque no todos los disñeos son iguales y eso me significaría hacer un flash por web y no me conviene por el tiempo y desuso.

Título: Re: detectar carga completa de pagina web en javascript
Publicado por: madpitbull_99 en 7 Junio 2011, 11:07 am

Has probado el plugin de Jquery: Lazy Load ?

Parece justo lo que necesitas, retrasa la carga de las imágenes.

Enlaces:
_Lazy Load: Retrasar carga de imágenes (http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/)
_Lazy Load Plugin for jQuery (Oficial) (http://www.appelsiini.net/projects/lazyload)
_LAZY LOAD (http://plugins.jquery.com/project/lazyload)

Título: Re: detectar carga completa de pagina web en javascript
Publicado por: WHK en 7 Junio 2011, 11:42 am

Lo estuve mirando y no resulta bién porque el fondo de la web no carga hasta que cargue la galería, ese plugin no detecta el fondo desde la hoja de estilo.

La idea es detectar cuando el fondo se carga:

style.css

Código

body{ background-image: url('http://www.wonderplanets.de/Mond/2004/Mosaik_060904_Half.jpg'); }

Código

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 alert('realy ready?');
});
</script>
</head>
<body>
:)
</body>
</html>

Título: Re: detectar carga completa de pagina web en javascript
Publicado por: WHK en 7 Junio 2011, 12:03 pm

Acabo de descubrir que:

Código:

window.onload = function(){

NO es lo mismo que:

Código:

$(document).ready(function(){

Document ready se ejecuta cuando el DOM ha completado su carga pero window onload se ejecuta cuando toda la página finaliza de cargar.

Guiandome por la lógica intenté hacer un:

Código:

$(window).ready(function(){

suponiendo que ready() llama al evento onload pero no es así, tampoco funciona, pero window.onload funciona perfectamente.

Ahora cambio mi pregunta y la nueva es: Hay alguna equivalencia en jquery para que no se vea tan feo? :xD
Todos los dias se aprende algo nuevo jajajajajaja

Título: Re: detectar carga completa de pagina web en javascript
Publicado por: Shell Root en 7 Junio 2011, 12:43 pm

Código

$(window).load(function() {
      alert("PoC!");
});

????

Título: Re: detectar carga completa de pagina web en javascript
Publicado por: WHK en 7 Junio 2011, 14:39 pm

Cita de: Shell Root en 7 Junio 2011, 12:43 pm

Código

$(window).load(function() {
      alert("PoC!");
});

????

nop tiene el mismo efecto que document ready. Pero ya quedó solucionado. Gracias.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WHK en 7 Junio 2011, 09:32 am