jQuery: el documento listo dispara demasiado pronto para mis requisitos

Question

Estoy desarrollando un sitio basado en todas las fotos. Algunas áreas de este sitio requieren cálculos basados ​​en las dimensiones de la imagen para que funcionen correctamente. Lo que he encontrado es que el documento listo está disparando demasiado pronto y mi interfaz gráfica se está comportando erráticamente como resultado.

Eliminé la función de listo para documentos y la sustituí por la función de 'buena ventana.oncarga, ya que, si leo correctamente, esta función no se dispara hasta que las imágenes estén completamente cargadas.

Mi pregunta es, ¿esto causará algún problema? ¿Y hay otras soluciones que quizás me he perdido?

Gracias por la ayuda chicos !!

Answer 1

No hay ninguna razón por la que no se puede utilizar en lugar de $(window).load()$(document.ready(). Tiene razón acerca de que la función no se activará hasta que las imágenes estén completamente cargadas (o no se hayan podido cargar).

El inconveniente de confiar plenamente en $(window).load() son que en algunos casos es evidente que ninguno de javascript está funcionando (es decir de navegación o eventos de clic ) hasta que cada artículo en su página se ha cargado. Algunos usuarios, por lo general los usuarios avanzados de un sitio web, hacen clic en las páginas con bastante rapidez y esto resta valor a la experiencia general del usuario.

El término mediosería uso $(window).ready() para la mayoría de las situaciones y solamente poner los eventos en el interior $(window).load() que absolutamente los requiere.

Answer 2

Tal vez puedas probar:

$(window).load(function() { 
alert("images are loaded!"); 
}); 

Ver este enlace para una comparación de $(document).ready() y $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

Puede usar el load() event in jquery, sin embargo, en la documentación se menciona que podría no funcionar como se esperaba si el elemento ya se ha cargado.

Nota: la carga solo funcionará si la configura antes de que el elemento se haya cargado por completo, si la configura después de que no ocurra nada. Esto no sucede en $ (document) .ready(), que jQuery maneja para que funcione como se espera, también cuando se configura después de que el DOM se haya cargado. - http://docs.jquery.com/Events/load

Answer 4

Altough window.onload se adapte a sus necesidades, lo recomendaría acelerar las cosas un poco:

$("img.load").load(function(){ 
    alert($(this).width()); 
}); 

Ahora se puede procesar una imagen individual misma rapidez con que se carga y no esperar para todo el conjunto de elementos.

Answer 5

Si desea retrasar con una cantidad de tiempo dado tal vez usted puede utilizar "setTimeout" :)

Answer 6

Aquí es una solución muy simple:

Incluir los width="" y height="" atributos para todas las imágenes. Esto obligará al navegador a procesar todo correctamente y en su lugar incluso antes de que se carguen las imágenes. El espacio requerido para cada imagen en el inmueble de la página se apartará adecuadamente mientras se cargan las imágenes.

Eso es todo!

Si lo hace, document.ready funcionará perfectamente en su situación. Lo que está sucediendo es que el navegador no sabe el tamaño de las imágenes antes de que se recuperen/carguen, por lo que el navegador tiene que adivinar. Eso puede causar el comportamiento divertido. Especificar el ancho y la altura de sus imágenes resolverá este problema.

Me sorprende que nadie haya mencionado eso. No es necesariamente un problema de Javascript, aunque cballou's answer es definitivamente un buen consejo.

De todos modos, espero que hayas aprendido algo nuevo. ;)