tablas - obtener datos de una tabla html javascript
¿Cómo caché una imagen en Javascript? (8)
Mis amigos y yo estamos trabajando en un sitio web donde nos gustaría almacenar en caché ciertas imágenes para poder mostrarlas más rápido en el futuro. Tengo dos preguntas principales:
- ¿Cómo se almacena en caché una imagen?
- ¿Cómo se usa una imagen una vez que ha sido almacenada? (y solo para verificar, si una imagen está en caché en la página A, es posible llamarla desde la memoria caché para usarla en la página B, ¿verdad?)
Además, ¿es posible establecer cuándo caducará la versión en caché de la imagen?
Sería muy apreciado si se incluyera un ejemplo y / o un enlace a una página que describa esto más adelante.
Estamos bien usando JavaScript sin procesar o la versión jQuery.
Aunque su pregunta dice "usar javascript", puede usar el atributo de prefetch de una etiqueta de enlace para precargar cualquier activo. Al escribir estas líneas (10 de agosto de 2016) no es compatible con Safari, pero se puede encontrar en cualquier otro lugar:
<link rel="prefetch" href="(url)">
Más información sobre soporte aquí: http://caniuse.com/#search=prefetch
Tenga en cuenta que IE 9,10 no figura en la matriz caniuse porque Microsoft ha suspendido el soporte para ellos.
Por lo tanto, si realmente estuviera atrapado en el uso de javascript, podría usar jquery para agregar dinámicamente estos elementos a su página también ;-)
Hay algunas cosas que puedes mirar:
Precarga tus imágenes
Establecer un tiempo de caché en un archivo .htaccess
Tamaño de archivo de imágenes y base64 codificándolos.
Precarga: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Almacenamiento en caché: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
Hay un par de pensamientos diferentes para la codificación de base64, algunos dicen que el http solicita un ancho de banda abatido, mientras que otros dicen que la carga "percibida" es mejor. Dejaré esto en el aire.
Sí, el navegador almacena imágenes en caché automáticamente.
Sin embargo, puede configurar una memoria caché de imagen para que caduque. Mira estas preguntas y respuestas de :
Siempre prefiero usar el ejemplo mencionado en Konva JS: Image Events para cargar imágenes.
Debe tener una lista de URL de imagen como objeto o matriz, por ejemplo:
var sources = { lion: ''/assets/lion.png'', monkey: ''/assets/monkey.png'' };Defina la definición de Función, donde recibe la lista de URL de imágenes y una función de devolución de llamada en su lista de argumentos, de modo que cuando termine de cargar la imagen, puede comenzar la ejecución en su página web:
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
- Por último, debe llamar a la función. Puede llamarlo, por ejemplo, desde jQuery ''s Document Ready
$(document).ready(function (){ loadImages(sources, buildStage); });
Tengo una respuesta similar para las imágenes de precarga asincrónicas a través de JS. Cargarlos dinámicamente es lo mismo que cargarlos normalmente. ellos guardarán en caché.
en cuanto al almacenamiento en caché, no puede controlar el navegador, pero puede configurarlo a través del servidor. si necesita cargar un recurso realmente nuevo a pedido, puede usar la técnica de eliminación de memoria caché para forzar la carga de un recurso nuevo.
Utilizo una técnica similar para lazyload images, pero no puedo evitar notar que Javascript no tiene acceso al caché del navegador en la primera carga.
Mi ejemplo:
Tengo un banner giratorio en mi página principal con 4 imágenes, el control deslizante espera 2 segundos, luego de que javascript carga la siguiente imagen, espera 2 segundos, etc.
Estas imágenes tienen direcciones URL únicas que cambian cada vez que las modifico, por lo que obtienen encabezados de almacenamiento en memoria caché que almacenarán en caché en el navegador durante un año.
max-age: 31536000, public
Ahora cuando abro Chrome Devtools y me aseguro de que la opción ''Deshabilitar caché'' no esté activa y cargue la página por primera vez (después de borrar la caché), todas las imágenes se captan y tienen un estado de 200. Después de un ciclo completo de todas las imágenes en el banner, las solicitudes de red se detienen y se utilizan las imágenes en caché.
Ahora cuando hago una actualización regular o voy a una subpágina y hago clic atrás, las imágenes que están en la caché parecen ignoradas. Esperaría ver un mensaje gris "desde el caché de disco" en la pestaña Red de Chrome devtools. En cambio, veo que las solicitudes pasan cada dos segundos con un círculo de estado verde en lugar de gris, veo que se transfieren datos, por lo que me da la impresión de que no se accede a la caché desde javascript. Simplemente recupera la imagen cada vez que se carga la página.
Por lo tanto, cada solicitud a la página de inicio activa 4 solicitudes independientemente de la política de almacenamiento en caché de la imagen.
Teniendo en cuenta lo anterior y el nuevo estándar http2 que la mayoría de los servidores web y navegadores soportan ahora, creo que es mejor dejar de usar lazyloading ya que http2 cargará todas las imágenes casi simultáneamente.
Si esto es un error en Chrome Devtools, realmente sorprende que nadie haya notado esto todavía. ;)
Si esto es cierto, usar lazyloading solo aumenta el uso de ancho de banda.
Por favor corrígeme si estoy equivocado. :)
como @Pointy dijo que no almacena imágenes en caché con javascript, el navegador hace eso. así que esto puede ser lo que estás pidiendo y puede que no sea ... pero puedes precargar imágenes usando javascript. Al colocar todas las imágenes que desea precargar en una matriz y poner todas las imágenes de esa matriz en elementos de img ocultos, 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);
});
Una vez que una imagen ha sido cargada 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 esté en la página actual o en cualquier otra página, siempre que la imagen sea utilizado antes de que caduque desde el 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 mantendrá la carga de la página cuando se hace desde JavaScript. Puedes hacer eso 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 precache.
Una vez que las imágenes han sido precargadas de esta manera a través de javascript, el navegador las tendrá en su memoria caché y podrá hacer referencia a las URL normales en otros lugares (en sus páginas web) y el navegador buscará esa URL desde su caché en lugar de hacerlo 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 es de 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.
Al precaching como se indica arriba, las imágenes se cargan de forma asíncrona 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 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);