detectar carga completa de pagina web en javascript

Iniciado por WHK, 7 Junio 2011, 09:32 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

WHK

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.

madpitbull_99

#1
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
_Lazy Load Plugin for jQuery (Oficial)
_LAZY LOAD


«Si quieres la paz prepárate para la guerra» Flavius Vegetius

[Taller]Instalación/Configuración y Teoría de Servicios en Red

WHK

#2
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 (css) [Seleccionar]
body{ background-image: url('http://www.wonderplanets.de/Mond/2004/Mosaik_060904_Half.jpg'); }

Código (html4strict) [Seleccionar]
<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>

WHK

#3
7 Junio 2011, 12:03 PM Ultima modificación: 7 Junio 2011, 12:05 PM por WHK
Acabo de descubrir que:
Código [Seleccionar]
window.onload = function(){

NO es lo mismo que:
Código [Seleccionar]
$(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 [Seleccionar]
$(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

Shell Root

#4
7 Junio 2011, 12:43 PM
Código (javascript) [Seleccionar]
$(window).load(function() {
      alert("PoC!");
});
????
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

WHK

#5
7 Junio 2011, 14:39 PM
Cita de: Shell Root en  7 Junio 2011, 12:43 PM
Código (javascript) [Seleccionar]
$(window).load(function() {
      alert("PoC!");
});
????

nop tiene el mismo efecto que document ready. Pero ya quedó solucionado. Gracias.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario