Pagina para precargar (arcivos.js/CSS ,imagenes, ..ect)

[emprear]

Iniciado por AvenD

Hola!

Estoy trabajando en una pagina intermediara entre mi Index, ES decir, una pagina de carga que meta en cache todo lo posible para que después la navegación sea mas rápida, por ejemplo, los archivos javascript, css, imagenes .. ect

¿se puede hacer?

@AvenD
No hay una respuesta específica a tu pregunta, hay que analizar el conjunto de la aplicación y buscar el mejor equilibrio posible.
Hay prácticas que si son obligadas,
Optimizar las imágenes al máximo.
Si es posible, utilizar gZip
Minimizar tanto js como css;
Utilizar técnicas de cache apropiadas, vía .htaccess es la mejor opción
Utilizar sprites css si fuese posible

Una vez hecho esto entonces si, precargar elementos, hacerlo con una página intermedia, es bastante común, bastaría llamar los .js y .css e imágenes que actualmente no utilizás, estás últimas en contenedores ocultos.
A veces nuestra Web tiene una navegación secuencial, la lógica de su navegación indica que vas a pasar e una pagina A a una B y a una C en ese orden, no en otro, si ese es el caso una página debería precargar (ya que la precarga en sí misma insume tiempo) solo elementos de la página siguiente.

Una alternativa que uso en algunos sitios es el uso de Jquery para precargar elementos, muy práctica ya que se puede precargar todo tipo de contenido (otros html, fuentes ttf, archivos swf, etc)

Te dejo un ejemplo

http://emprear.com.ar/competencia2011/

Si ves esa página introductoria, en la cual el cliente se detendrá a leer una información básica, en la misma estoy precargando elementos de la demostración posterior, en el código fuente te vas a econtrar con esta script en el header

Código Javascript:

<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>
 

y al final del documento

Código HTML:

<div id="precarga"><!-- precarga --></div>
<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>
 

Obviamente el div #precarga tiene definido en el css

Código CSS:

div#precarga{
display:none;
}
 

Esto mismo se puede realizar con Ajax sin necesidad de Jquery
Insisto en que la aplicación de estos métodos requiere un análisis completo del fun cionamiento de tu Web en sus totalidad

Saludos