¿Pre-cargar todas las imágenes?

[NueveReinas]

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

[PHPeros]

Aquí proponen otra forma. También se puede hacer con CSS2.

[NueveReinas]

Iniciado por PHPeros

Aquí proponen otra forma. También se puede hacer con CSS2.

Pero...

Código Javascript:

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
 

Hay que definir las imágenes, y yo no quiero eso, quiero que sean todas las de la web.

[PHPeros]

Pues pones todas, no queda otra

[NueveReinas]

Iniciado por PHPeros

Pues pones todas, no queda otra

Debe haber otra solución

[elmouse19]

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:

$( document ).ready(function() {
    showDiv();
    fixlightbox();
});
// Show Divs
function showDiv() {
    $('.photos a img').load(function(){
        $(this).fadeIn(600);
        $(this).next().fadeOut(0);
        exe_masonry();
    });
}
 

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