Se puede hacer con javascript puro, pero en tu caso, que ya estás usando jquery, te doy una solución más práctica,
mirá este ejemplo
http://emprear.com.ar/competencia2011/
en el head te vas a encontrar con esto
Código:
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>
Y antes del cierre del body, un div
que en el css está con display:none; !!
Código:
<div id="precarga"><!-- precarga --></div>
y finalmente, la lista de archivos que deseamos precargar (pueden ser imágenes, fuentes, flash, texto, etc, no hay limitación)
Código:
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'/competencia2011/css/josefin/JosefinSlab-SemiBold-webfont.ttf',
'/competencia2011/css/josefin/JosefinSlab-Bold-webfont.ttf',
'/competencia2011/img/santa.png',
'/competencia2011/img/sexy.png',
'/competencia2011/img/amianto.png',
'/competencia2011/img/cand.cur',
'/competencia2011/img/carro.png',
'/competencia2011/img/contorno-tierrafire.png',
'/competencia2011/img/est-h.png',
'/competencia2011/img/estrellas.png',
'/competencia2011/img/luna.png',
'/competencia2011/img/regalo.png',
'/competencia2011/img/renos.png',
'/competencia2011/img/smart.png',
'/competencia2011/precarga.txt'
);
//]]>
</script>
En mi ejemplo, es una página introductoria y lo que precargo son los elementos que van a utilizarse en la animación posterior.
En el tuyo deberías determinar "inteligentemente" que vale la pena precargar y que no.
Te comento otro detalle, mirá
https://googledrive.com/host/0B5cDQ-...DQ/img/opt.jpg
pesa 74kb contra los 128kb de la tuya, y visualmente casi no hay pérdida de calidad. Sería importante que trabajes obre eso
Saludos