¿Cómo podría precargar a la caché una serie de imágenes usando únicamente CSS/HTML para que ya estén cargadas mas rápido al interactuar el usuario con la web?
-
He visto que estas preguntando mas menos con el mismo objetivo. La pregunta es que quieres hacer, y por que de esa manera. Pues tal ves te estas ahogando en un vaso de agua y se puede hacer de otra manera– Jose Miguel SepulvedaCommented el 5 may. 2017 a las 13:22
-
@JoséMiguelSepulveda He entendido lo del otro post dónde me has mostrado como hacerlo en javascript. El caso es que me sigue saltando error por todas partes ya que tengo muchas cosas metidas dentro de funciones. Me gustaría por tanto prescindir completamente de javascript y lograr precargar las imágenes a la caché mediante CSS para no complicarme la vida. Quiero que básicamente las imágenes ya estén precargadas cuando el usuario interactúe con mi página para que no le tarden en aparecer y evitar que se vea ese efecto de "imágenes bailando por la pantalla durante milésimas al cargarse".– nice_guyCommented el 5 may. 2017 a las 13:31
-
Te deje como respuesta. En este caso cargas primero en js toda las imágenes, una vez cargadas, se crea el DOOM que no es necesario que este completo, pero ejecuta el script de paso a las imágenes una vez que se hayan cargado todas las etiquetas <img>, así sera una carga híbrida :)– Jose Miguel SepulvedaCommented el 5 may. 2017 a las 13:39
2 respuestas
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Al aplicar estratégicamente los ID de precarga a los elementos (X)HTML existentes, podemos usar la propiedad background de CSS para precargar las imágenes fuera de la pantalla, en el background. Entonces, el tiempo en que las rutas de acceso a estas imágenes sigan siendo el mismo cuando se hace referencia a otras partes de la página web, el navegador utilizará las imágenes precargadas/en caché al renderizar la página. Simple, eficaz y no requiere JavaScript.
El método es eficaz para esto, sin embargo, hay espacio para la mejora. Las imágenes que están precargadas con este método se cargarán junto con el resto del contenido de la página, lo que aumenta el tiempo total de carga de la página.
Tomado de http://www.elwebmaster.com/general/precarga-imagenes-css-javascript-ajax
Recuerda que una vez que una imagen ha sido cargado en modo alguno en el navegador, sera almacenada recién en la caché del navegador y se carga mucho más rápido la próxima vez que se utiliza si este uso está en la página actual o en cualquier otra página, siempre y cuando la imagen se utilice antes de que caduque la caché del navegador.
Como en la otra parte indique que no podias dibujar las imagenes sin que el DOOM estuviera cargado, lo que si puedes hacer, es cargar primero el script en el <head>
y posteriormente cuando hayas pasado por todas las etiquetas <img>
, puedas cargar el script de carga, como muestro a continuación.
<html>
<script>
var images = [];
var cant = 0;
function preload() {
cant = arguments.length;
for (var i = 0; i < cant; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload( "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png",
"https://www.javatpoint.com/images/javascript/javascript_logo.png",
"https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
)
</script>
<head>
<title>Ejemplo</title>
</head>
<body>
<img id="img0" src="">
<img id="img1" src="">
<img id="img2" src="">
<script>
for (var i = 0; i < cant; i++) {
document.getElementById("img"+i).src = images[i].src;
}
</script>
<h1>El DOOM recien termino de cargar y las imagenes ya se cargaron</h1>
</body>
</html>
Espero que esto sea lo que andabas buscando. Saludos y cualquier cosa consulta en los comentarios
NOTA:
Para tu caso particular que mencionabas que cargabas por "innerHTML", hazlo del siguiente modo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body id="body" hidden="true">
<div id="imagenes"></div>
<script>
document.getElementById("imagenes").innerHTML = "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png'> <br> <img src='https://www.javatpoint.com/images/javascript/javascript_logo.png'><br> <img src='https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png' onload='cargadoTodaImagen()'>";
</script>
</body>
<script>
function cargadoTodaImagen(){
document.getElementById("body").style.display = 'block';
}
</script>
</html>
-
El caso es que yo las imágenes las llamo a modo de imprimir innerHTML dentro de funciones en el javascript . ¿Hay alguna forma de abrir un chat contigo en esta página para explicártelo un poco mejor y a lo mejor poder resolver lo que me está fallando?– nice_guyCommented el 5 may. 2017 a las 13:39
-
ahora te entendí. Pero haz una cosa. Coloca el
<body>
oculto, cuando se hayan cargado las imágenes lo haces aparecer por js :D Commented el 5 may. 2017 a las 13:41 -
No termino de entender a qué te refieres con lo de colocar el <body> oculto.– nice_guyCommented el 5 may. 2017 a las 13:43
-
@nice_guy Al cargar el doom, nada va a mostrar del <body>, hasta que se cargue la ultima imagen. Esto por el evento onload donde al cargarse la ultima imagen se ejecutara el procedimiento donde el <body> ahora lo muestra. Recuerda que a tu ultima imagen debes colocarle este evento, para que entonces se vea el <body> :D Commented el 5 may. 2017 a las 14:01
-
No se si te sirva de algo, pero puedes intentar utilizar este plugin de jQuery: github.com/flesler/jquery.preload Commented el 5 may. 2017 a las 14:17