Una vez que una imagen se ha cargado de alguna manera en el navegador, estará en la caché del navegador y se cargará mucho más rápido la próxima vez que se use, ya sea que ese uso sea en la página actual o en cualquier otra página, siempre que la imagen sea utilizado antes de que expire de la caché del navegador.
Por lo tanto, para almacenar en caché las imágenes, todo lo que tiene que hacer es cargarlas en el navegador. Si desea almacenar en caché un montón de imágenes, probablemente sea mejor hacerlo con javascript, ya que generalmente no retendrá la carga de la página cuando se hace desde javascript. Puedes hacerlo así:
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
Esta función se puede llamar tantas veces como desee y cada vez, solo agregará más imágenes al precaché.
Una vez que las imágenes se han precargado de esta manera a través de javascript, el navegador las tendrá en su caché y usted puede simplemente consultar las URL normales en otros lugares (en sus páginas web) y el navegador obtendrá esa URL de su caché en lugar de hacerlo a través del red.
Eventualmente, con el tiempo, el caché del navegador puede llenarse y deshacerse de las cosas más antiguas que no se han usado por un tiempo. Entonces, eventualmente, las imágenes se borrarán del caché, pero deberían permanecer allí por un tiempo (dependiendo de qué tan grande sea el caché y cuántas otras búsquedas se realicen). Cada vez que las imágenes se precargan de nuevo o se utilizan en una página web, actualiza su posición en la caché del navegador automáticamente para que sea menos probable que se vacíen de la caché.
La caché del navegador es entre páginas, por lo que funciona para cualquier página cargada en el navegador. Por lo tanto, puede almacenar previamente en un lugar de su sitio y la caché del navegador funcionará para todas las demás páginas de su sitio.
Al almacenar en caché como se indicó anteriormente, las imágenes se cargan de forma asincrónica para que no bloqueen la carga o visualización de su página. Pero, si su página tiene muchas imágenes propias, estas imágenes precaché pueden competir por ancho de banda o conexiones con las imágenes que se muestran en su página. Normalmente, este no es un problema notable, pero en una conexión lenta, este almacenamiento en caché podría ralentizar la carga de la página principal. Si estaba bien que las imágenes de precarga se cargaran en último lugar, entonces podría usar una versión de la función que esperaría para iniciar la precarga hasta que todos los demás recursos de la página ya estuvieran cargados.
function preloadImages(array, waitForOtherResources, timeout) {
var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
if (!preloadImages.list) {
preloadImages.list = [];
}
if (!waitForOtherResources || document.readyState === 'complete') {
loadNow();
} else {
window.addEventListener("load", function() {
clearTimeout(timer);
loadNow();
});
timer = setTimeout(loadNow, t);
}
function loadNow() {
if (!loaded) {
loaded = true;
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.onload = img.onerror = img.onabort = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = imgs[i];
}
}
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);