No hace mucho tuve que lidiar con un proyecto en el que, en uno de los apartados, había un listado de restaurantes, ordenados en forma de grid mediante Isotope, y que al clicar sobre cualquiera de ellos se desplegaba un apartado con unas cuantas fotos del sitio. Al final habían un montón de fotos y la página tardaba una eternidad en aparecer: Isotope no arrancaba hasta que toda la página (imágenes incluídas) habían cargado. Y cargar las imágenes por Ajax al clicar sobre un elemento estaba descartado.
Intenté cargar las imágenes mediante $(document).ready pero no había manera, se seguían cargando junto con el resto del contenido. Pero al final encontré una solución.
En un artículo de Mika Tuupola vi que tenía que hacerlo mediante $(window).bind, así que preparé las imágenes que quería cargar después de terminar de cargar la página, agregándoles un atributo con la ruta, de la siguiente manera:
<img srcPre="ruta_de_la_imagen" />
Y añadí el siguiente script:
$(window).bind("load", function() {
// Cargar imagenes
$(".imgPreload").each(function() {
$(this).attr("src", $(this).attr("srcPre"));
});
});
Ahora sí, la página aparecía rápidamente y las imágenes (ocultas) cargaban a continuación.
En el enlace de Mika hay otro ejemplo para precargar imágenes hover, es decir, las que sustituyen a la original al pasar el ratón por encima.