После загрузки: проверьте, находится ли изображение в кеше браузера

Ответ 1

после некоторого исследования я нашел решение:

Идея состоит в том, чтобы записывать кешированные изображения, привязывая функцию журнала к событию загрузки изображений. Сначала я думал хранить источники в файле cookie, но он не является надежным, если кеш очищается без cookie. Кроме того, он добавляет еще один файл cookie в HTTP-запросы...

Затем я встретил магию: window.localStorage (подробности)

Атрибут localStorage обеспечивает постоянные области хранения для доменов

Именно то, что я хотел:). Этот атрибут стандартизован в HTML5, и он уже работает почти во всех последних браузерах (FF, Opera, Safari, IE8, Chrome).

Вот код (без обращения к окну localStorage несовместимых браузеров):

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"));
    });
});

Ответ 2

Запрос ajax для изображения будет возвращаться почти сразу, если он кэшируется. Затем используйте setTimeout, чтобы определить, не готов ли он и отменить запрос, чтобы вы могли его запросить позже.

Update:

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;
}

Ответ 3

У меня есть замечание о ваших пустых источниках изображения. Вы писали:

Итак, я представляю страницу с пустыми источниками изображения с источником, указанным в атрибуте "alt". Я вставляю источники изображений после события "window.onload", и он отлично работает.

В прошлом у меня возникали проблемы с этим, потому что в некоторых браузерах пустые атрибуты src вызывают дополнительные запросы. Здесь, что они делают (скопированы из правила производительности Yahoo!, там также сообщение в блоге по этому вопросу более подробно):

• Internet Explorer делает запрос в каталог, в котором находится страница.
• Safari и Chrome делают запрос к самой фактической странице.
• Firefox 3 и более ранние версии ведут себя так же, как Safari и Chrome, но версия 3.5 рассмотрела эту проблему [ошибка 444931] и больше не отправляет запрос.
• Opera ничего не делает, когда встречается пустая картинка src.

Мы также используем много jQuery на нашем сайте, и не всегда можно было избежать пустых тегов изображений. Я решил использовать прозрачный gif 1x1 px так: src="t.gif" для изображений, которые я вставляю только после pageload. Он очень мал и кэшируется браузером. Это очень сработало для нас.

Приветствия, Оливер

Ответ 4

На всякий случай другие могут столкнуться с одной и той же проблемой. некоторые из предлагаемых здесь решений (а именно хранение информации о кеше в хранилище данных локального браузера) могут быть разбиты по двум причинам. Во-первых, если кэш изображения истекает, а во-вторых, если кеш очищается пользователем. Другим подходом было бы установить источник изображения в местозаполнитель. Затем измените источник на путь/имя изображения. Таким образом, браузер должен проверить свой собственный кеш. Должен работать с большинством браузеров независимо от их API.

Ответ 5

В 2017 году API-интерфейс ресурса может помочь вам проверить это с помощью свойства PerformanceResourceTiming.transferSize. Это свойство возвращает ненулевой размер передачи при его загрузке с сервера (не кэшируется) и возвращает ноль, если он получен из локального кеша.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize