Una vez que una imagen se ha cargado de alguna manera en el navegador, estará en la memoria caché del navegador y se cargará mucho más rápido la próxima vez que se use ya sea en la página actual o en cualquier otra página tan larga como la imagen se utiliza antes de que caduque desde la memoria caché del navegador.
Por lo tanto, para precachear imágenes, todo lo que tiene que hacer es cargarlas en el navegador. Si desea precachear un grupo 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. Puede hacerlo de esta manera:
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
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, se acaba de añadir más imágenes a la precache.
Una vez que las imágenes se han precargado de esta forma mediante javascript, el navegador las tendrá en su caché y podrá consultar las URL normales en otros lugares (en sus páginas web) y el navegador buscará esa URL desde su caché en lugar de a través de la red.
Finalmente, con el tiempo, la memoria caché del navegador puede llenarse y arrojar las cosas más antiguas que no se han utilizado en un momento. Por lo tanto, con el tiempo, las imágenes se eliminarán de la memoria caché, pero deben permanecer allí por un tiempo (dependiendo de qué tan grande es la caché y cuánto se hace otra exploración). Cada vez que las imágenes se precargan de nuevo o se usan en una página web, se actualiza automáticamente su posición en el caché del navegador, por lo que es menos probable que se eliminen del caché.
El caché del navegador tiene una página cruzada, por lo que funciona para cualquier página cargada en el navegador. Por lo tanto, puede precachear en un lugar en su sitio y la memoria caché del navegador funcionará para todas las demás páginas de su sitio.
Cuando precaching que el anterior, las imágenes se cargan de forma asíncrona para que no se bloquee la carga o la visualización de la página. Pero, si su página tiene muchas imágenes propias, estas imágenes precacheadas pueden competir por el ancho de banda o las conexiones con las imágenes que se muestran en su página. Normalmente, esto no es un problema notable, pero en una conexión lenta, este precaching podría ralentizar la carga de la página principal. Si fue correcto cargar las imágenes de precarga al último, 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();
});
// in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
// then preload the images anyway after some timeout time
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
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);
usted no lo hace. El navegador lo hace. – Pointy
¿el caché del navegador genera imágenes automáticamente? –
@Logan: Sí, el navegador guarda en caché las imágenes automáticamente, siempre que el servidor envíe los encabezados necesarios para indicarle al navegador que es seguro almacenarlo en caché. (Estos encabezados también le pueden indicar al navegador el tiempo de caducidad, que es parte de su pregunta.) – icktoofay