navegadores - eliminar cache con javascript

Post-carga: verifica si hay una imagen en el caché del navegador

Question

Pregunta de la versión corta: ¿Existe la función equivalente navigator.mozIsLocallyAvailable que funciona en todos los navegadores, o una alternativa?

Versión larga :)

Hola, esta es mi situación: quiero implementar una extensión HtmlHelper para asp.net MVC que maneje la imagen después de la carga fácilmente (usando jQuery).

Por lo tanto, renderizo la página con fuentes de imagen vacías con la fuente especificada en el atributo "alt". Inserto las fuentes de imagen después del evento "window.onload" y funciona muy bien.

Hice algo como esto:

$(window).bind(''load'', function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        $(this).attr("src", $(this).attr("alt"));
    });
});

El problema es: después de la primera carga, las imágenes poscargadas se almacenan en caché. Pero si la página tarda 10 segundos en cargarse, las imágenes cargadas en la memoria caché se mostrarán después de estos 10 segundos.

Así que creo que se deben especificar las fuentes de imagen en el evento "document.ready" si la imagen se almacena en caché para mostrarlas inmediatamente.

Encontré esta función: navigator.mozIsLocallyAvailable para verificar si una imagen está en la memoria caché. Esto es lo que he hecho con jquery:

//specify cached image sources on dom ready
$(document).ready(function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        var source = $(this).attr("alt")
        var disponible = navigator.mozIsLocallyAvailable(source, true);
        if (disponible)
            $(this).attr("src", source);
    });
});

//specify uncached image sources after page loading
$(window).bind(''load'', function() {
        var plImages = $(".postLoad");
        plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

Funciona en el DOM de Mozilla pero no funciona en ningún otro. Intenté navigator.isLocallyAvailable: mismo resultado.

¿Hay alguna alternativa?

Answer 1

En 2017, Resource Timing API puede ayudarlo a verificar esto utilizando la propiedad PerformanceResourceTiming.transferSize. Esta propiedad devolverá un tamaño de transferencia distinto de cero cuando se descargue del servidor (no en caché) y devuelve cero si se extrae de un caché local.

Referencia: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize

Answer 2

La manera más eficiente, simple y ampliamente respaldada para verificar si una imagen ya ha sido almacenada en la memoria caché es hacer lo siguiente ...

1. Crear un objeto de imagen
2. Establezca la propiedad src en la url deseada
3. Compruebe el atributo completado inmediatamente para ver si la imagen ya está en caché
4. Establezca el atributo src en "", o en blanco, para que la imagen no se cargue innecesariamente

Al igual que...

function is_cached(src) {
    var img = new Image();
    img.src = src;
    var complete = img.complete;
    img.src = "";
    return complete;
}

Answer 3

Solo en caso de que otros encuentren el mismo problema. algunas de las soluciones proporcionadas aquí (es decir, almacenar la información de la caché en un almacenamiento de datos del navegador local) podrían fallar por dos razones. En primer lugar, si el caché de la imagen caduca y, en segundo lugar, si el caché lo borra. Otro enfoque sería establecer la fuente de la imagen en un marcador de posición. Luego cambiando la fuente a la ruta / nombre de la imagen. De esta forma, será responsabilidad del navegador verificar su propio caché. Debería funcionar con la mayoría de los navegadores independientemente de su API.

Answer 4

Tengo un comentario sobre tus fuentes de imagen vacías. Tu escribiste:

Por lo tanto, renderizo la página con fuentes de imagen vacías con la fuente especificada en el atributo "alt". Inserto las fuentes de imagen después del evento "window.onload" y funciona muy bien.

He tenido problemas con esto en el pasado, porque en algunos navegadores los atributos src vacíos causan solicitudes adicionales. Esto es lo que hacen (copiado de las reglas de rendimiento de Yahoo!, también hay una publicación en el blog sobre ese tema con más detalles):

• Internet Explorer realiza una solicitud al directorio en el que se encuentra la página.
• Safari y Chrome realizan una solicitud a la página real.
• Firefox 3 y versiones anteriores se comportan igual que Safari y Chrome, pero la versión 3.5 resolvió este problema [error 444931] y ya no envía una solicitud.
• Opera no hace nada cuando se encuentra un src de imagen vacía.

También usamos mucho jQuery en nuestro sitio, y no siempre ha sido posible evitar las etiquetas de imagen vacías. src="t.gif" usar un gif transparente de 1x1 px como el siguiente: src="t.gif" para las imágenes que solo inserté después de la carga de la página. Es muy pequeño y el navegador lo almacena en caché. Esto ha funcionado muy bien para nosotros.

Saludos, Oliver

Answer 5

Una solicitud ajax para la imagen volvería casi de inmediato si está en caché. Luego use setTimeout para determinar si no está listo y cancele la solicitud para que pueda volver a ponerla en la cola para más adelante.

Actualizar:

var lqueue = [];
$(function() {
  var t,ac=0;
  (t = $("img")).each(
    function(i,e)
    {
      var rq = $.ajax(
      {
        cache: true,
        type: "GET",
        async:true,
        url:e.alt,
        success: function() { var rq3=rq; if (rq3.readyState==4) { e.src=e.alt; } },
        error: function() { e.src=e.alt; }
      });

      setTimeout(function()
      {
        var k=i,e2=e,r2=rq;
        if (r2.readyState != 4)
        {
          r2.abort();
          lqueue.push(e2);
        }
        if (t.length==(++ac)) loadRequeue();
      }, 0);
    }
  );
});

function loadRequeue()
{
  for(var j = 0; j < lqueue.length; j++) lqueue[j].src=lqueue[j].alt;
}

Answer 6

después de una búsqueda, encontré una solución:

La idea es registrar las imágenes en caché, vinculando una función de registro en el evento ''cargar'' de las imágenes. Primero pensé en almacenar fuentes en una cookie, pero no es confiable si la memoria caché se borra sin la cookie. Además, agrega una cookie más a las solicitudes HTTP ...

Entonces conocí la magia: window.localStorage ( details )

El atributo localStorage proporciona áreas de almacenamiento persistentes para dominios

Exactamente lo que quería :). Este atributo está estandarizado en HTML5, y ya funciona en casi todos los navegadores recientes (FF, Opera, Safari, IE8, Chrome).

Aquí está el código (sin manejar window.localStorage navegadores no compatibles):

var storage = window.localStorage;
if (!storage.cachedElements) {
    storage.cachedElements = "";
}

function logCache(source) {
    if (storage.cachedElements.indexOf(source, 0) < 0) {
        if (storage.cachedElements != "") 
            storage.cachedElements += ";";
        storage.cachedElements += source;
    }
}

function cached(source) {
    return (storage.cachedElements.indexOf(source, 0) >= 0);
}

var plImages;

//On DOM Ready
$(document).ready(function() {
    plImages = $(".postLoad");

    //log cached images
    plImages.bind(''load'', function() {
        logCache($(this).attr("src"));
    });

    //display cached images
    plImages.each(function() {
        var source = $(this).attr("alt")
        if (cached(source))
            $(this).attr("src", source);
    });
});

//After page loading
$(window).bind(''load'', function() {
    //display uncached images
    plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});