Foros del Web » Programando para Internet » Jquery »

¿Pre-cargar todas las imágenes?

Estas en el tema de ¿Pre-cargar todas las imágenes? en el foro de Jquery en Foros del Web. Hola gente Llevo un buen rato buscando un método en jQuery (o JS) para pre-cargar TODAS las imágenes del DOM "onLoad", y no he encontrado ...
  #1 (permalink)  
Antiguo 03/05/2015, 09:10
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Información ¿Pre-cargar todas las imágenes?

Hola gente

Llevo un buen rato buscando un método en jQuery (o JS) para pre-cargar TODAS las imágenes del DOM "onLoad", y no he encontrado nada que me sea útil.

He probado con este tutorial, que en esa web funciona bien, pero no en la práctica [de mi página]. Ni idea de porqué.

Sería para usar tanto en hover como en display:none para después hacer un toggle con jQuery.

jrasias d ante braso
__________________
¿Te sirvió la respuesta? Deja un +1
  #2 (permalink)  
Antiguo 03/05/2015, 10:15
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: ¿Pre-cargar todas las imágenes?

Aquí proponen otra forma. También se puede hacer con CSS2.
  #3 (permalink)  
Antiguo 03/05/2015, 15:51
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: ¿Pre-cargar todas las imágenes?

Cita:
Iniciado por PHPeros Ver Mensaje
Aquí proponen otra forma. También se puede hacer con CSS2.
Pero...

Código Javascript:
Ver original
  1. $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

Hay que definir las imágenes, y yo no quiero eso, quiero que sean todas las de la web.
__________________
¿Te sirvió la respuesta? Deja un +1
  #4 (permalink)  
Antiguo 04/05/2015, 09:01
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: ¿Pre-cargar todas las imágenes?

Pues pones todas, no queda otra
  #5 (permalink)  
Antiguo 04/05/2015, 12:15
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: ¿Pre-cargar todas las imágenes?

Cita:
Iniciado por PHPeros Ver Mensaje
Pues pones todas, no queda otra
Debe haber otra solución
__________________
¿Te sirvió la respuesta? Deja un +1
  #6 (permalink)  
Antiguo 06/05/2015, 15:16
 
Fecha de Ingreso: noviembre-2010
Ubicación: Córdoba, Argentina
Mensajes: 74
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: ¿Pre-cargar todas las imágenes?

Hola.

Mira. Yo lo hice de esta forma. Pero tengo un problema de que a veces algunas imagenes no se muestran. Y no se por que. Ya publique aca mismo preguntando, pero no tuve respuesta.

JavaScript:
Código Javascript:
Ver original
  1. $( document ).ready(function() {
  2.     showDiv();
  3.     fixlightbox();
  4. });
  5. // Show Divs
  6. function showDiv() {
  7.     $('.photos a img').load(function(){
  8.         $(this).fadeIn(600);
  9.         $(this).next().fadeOut(0);
  10.         exe_masonry();
  11.     });
  12. }

HTML:
Código HTML:
<div class="photos">
	<a href="estudio/server/php/files/<?php echo $row['name']; ?>" data-lightbox="example-set" data-title="<?php echo $row['titulo_foto']; ?>">
		<img class="photo" id="id_<?php echo $row['id_foto']; ?>" src="estudio/server/php/files/<?php echo $row['name']; ?>" />
		<div id="facebookG">
		   <div id="blockG_1" class="facebook_blockG"></div>
		   <div id="blockG_2" class="facebook_blockG"></div>
		   <div id="blockG_3" class="facebook_blockG"></div>
		</div>
	</a>
</div> 
Esta parte del codigo:
Código HTML:
<div id="facebookG">
	<div id="blockG_1" class="facebook_blockG"></div>
	<div id="blockG_2" class="facebook_blockG"></div>
	<div id="blockG_3" class="facebook_blockG"></div>
</div> 
Es un conjunto de divs que se animan con CSS3 para simular la imagen de carga (igual a la que se usa en facebook), y se que oculta con el js de arriba, una vez que la imagen se carga.

La funcion exe_masonry(); esta para llamar a un plugin js que acomoda las imagenes para ocupar todo el espacio disponible en la pagina. Si, no lo usas en tu web, esa linea de código, la podes borrar.

Y fixlightbox(); es una función personalizada para corregir unos detalles del lightbox que uso.

En este tema, hice la consulta sobre como solucionar el problema.
AQUI

Última edición por elmouse19; 06/05/2015 a las 15:26

Etiquetas: todas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:36.