¿Cómo se almacena en caché una imagen en Javascript?

Solución:

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 caduque 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) {
                // 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, 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 de la la 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 eliminará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 nuevamente o se usan 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();
        });
        // 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);

como @Pointy dijo que no almacena imágenes en caché con javascript, el navegador lo hace. así que esto puede ser lo que estás pidiendo y puede que no lo sea … pero puedes precargar imágenes usando javascript. Al colocar todas las imágenes que desea precargar en una matriz y colocar todas las imágenes de esa matriz en elementos img ocultos, efectivamente precarga (o almacena en caché) las imágenes.

var images = [
'/path/to/image1.png',
'/path/to/image2.png'
];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});

Aunque su pregunta diga “usando javascript”, puede usar el prefetch atributo de una etiqueta de enlace para precargar cualquier activo. En el momento de escribir este artículo (10 de agosto de 2016) no es compatible con Safari, pero está prácticamente en todos los demás lugares:

<link rel="prefetch" href="https://foroayuda.es/(url)">

Más información sobre soporte aquí: http://caniuse.com/#search=prefetch

Tenga en cuenta que IE 9,10 no se enumeran en el caniuse matrix porque Microsoft ha descontinuado el soporte para ellos.

Entonces, si estaba realmente atascado en el uso de javascript, también podría usar jquery para agregar dinámicamente estos elementos a su página 😉

---

---

Utiliza Nuestro Buscador