1

Tengo una duda respecto el hide() y show() de jquery. Ahí va:

Tenemos una web en la que se cargan muchas imágenes en forma de cuadrícula (unas 140).

Cuando abrimos/cargamos la página web, las imágenes se cargan de forma aleatoria, es decir, las imágenes que están las primeras se cargan primero y a medida que se va cargando la página van cargándose las otras pero de forma aleatoria (p.e: carga la que está en la posición 100, después se carga la que está en la posición 13, después la 39, después la 12, después la 120...).

Lo que hay que hacer es que carguen secuencialmente de arriba a bajo a medida que se hace scroll. Dejando de lado la utilización del LazyLoad, mi pregunta es la siguiente:

Si cuando carga el DOM las imágenes que no se ven a simple vista las escondo con hide() y cuando la barra lateral llega al final de la página las voy mostrando con el show(), ¿esto reduce el tiempo de carga de la página (que es lo que queremos) o aunque ponga las imágenes escondidas se cargan igual al cargarse el DOM? Es decir, ¿aunque la imagen esté en hide() habrá cargado también estando escondida o se cargará cuando la muestre? (show())

2
  • si puedes acceder al elemento con jquery es que estar esta ya. Pero esta claro que no es lo mismo cargarlas visualzadas u ocultas en rendimiento. Yo en tu caso las cargaria todas ocultas por css, y luego haz show() solo de las que necesites (random en este caso). Echale un ojo toogle, para jugar con mostrar y ocultar.
    – GDP
    el 8 sep. 2017 a las 11:45
  • si se cargan igual.
    – juliocpiro
    el 8 sep. 2017 a las 16:06

2 respuestas 2

1

La duda principal de tu pregunta queda respondida por jQuery, al hablar de hide() dicen lo siguiente en una nota, al final:

Note: This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.


Nota: Este método puede causar problemas de rendimiento, especialmente cuando se utiliza en muchos elementos. Si se encuentra con estos problemas, utilice herramientas de prueba de rendimiento para determinar si este método los está causando. Además, este método puede causar problemas con diseños responsivos si el valor de visualización difiere en diferentes tamaños de ventana gráfica.

Tu otra duda de lo que ocurre cuando usas hide() también es explicado en la documentación:

With no parameters, the .hide() method is the simplest way to hide an element:

$( ".target" ).hide();

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.


Sin parámetros, el método .hide() es la forma más sencilla de ocultar un elemento:

$ (".target").hide();

Los elementos coincidentes se ocultarán inmediatamente, sin animación. Esto es más o menos equivalente a llamar a .css ("display", "none"), excepto que el valor de la propiedad de visualización se guarda en el caché de datos de jQuery para poder volver a restaurar su valor inicial. Si un elemento tiene un valor de visualización de inline y está oculto, entonces se mostrará de nuevo en línea.

La misma advertencia del rendimiento la tienes con respecto a show():

Nota: Este método puede causar problemas de rendimiento, especialmente cuando se utiliza en muchos elementos. Si se encuentra con estos problemas, utilice herramientas de prueba de rendimiento para determinar si este método los está causando. Además, este método puede causar problemas con diseños responsivos si el valor de visualización difiere en diferentes tamaños de ventana gráfica.

En conclusión

No creo que el uso de hide() / show() sea una buena idea para resolver tu problema.

1
0

Puedes hacer que las imágenes tengan un style="display:none;" en linea y luego con un bucle de js ir mostrandolas (fadein)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.