Постзагрузка: проверьте, находится ли изображение в кэше браузера
Могу ли я увеличить память кучи до 75% физической памяти (куча 6 ГБ).
Да, вы можете. Фактически, вы можете увеличить до большего объема физической памяти, если хотите.
Будет ли это хорошей идеей, это зависит от того, сколько еще работает в вашей системе. В частности, если «рабочий набор» приложений и служб, которые в настоящее время работают, значительно превышает доступную физическую память, ваша система может «трэш», проводя много времени, перемещая страницы виртуальной памяти на диск и с диска. Чистый эффект заключается в том, что система становится очень медленной.
5 ответов
после некоторого исследования я нашел решение:
Идея состоит в том, чтобы регистрировать кэшированные изображения, привязывая функцию журнала к событию загрузки изображений. Сначала я подумал сохранить источники в куки. , но это ненадежно, если кеш очищается без файла cookie. Более того, он добавляет еще один файл cookie к HTTP-запросам ...
Затем я встретил волшебство: window.localStorage ( подробности )
Атрибут localStorage предоставляет {{1 }} постоянные области хранения для доменов
Именно то, что я хотел :). Этот атрибут стандартизирован в HTML5 и уже работает почти во всех последних браузерах (FF, Opera, Safari, IE8, Chrome).
Вот код (без обработки несовместимых с window.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"));
});
});
Ajax-запрос к изображению вернется почти сразу, если он будет кэширован. Затем используйте setTimeout, чтобы определить, не готов ли он, и отмените запрос, чтобы вы могли запросить его позже.
Обновление:
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;
}
На тот случай, если другие могут столкнуться с той же проблемой. Некоторые из представленных здесь решений (а именно хранение информации о кеше в локальном хранилище данных браузера) могут сломаться по двум причинам. Во-первых, если срок действия кэша изображения истек, и, во-вторых, если он очищен пользователем. Другой подход заключается в том, чтобы установить источник изображения для заполнителя. Затем измените источник на путь / имя изображения. Таким образом, браузер несет ответственность за проверку собственного кэша. Должно работать с большинством браузеров независимо от их API.
Наиболее эффективный, простой и широко поддерживаемый способ проверки того, что изображение уже было кэшировано, заключается в следующем:
- Создать объект изображения
- Установить свойство src для нужного URL
- Немедленно проверить заполненный атрибут, чтобы увидеть, кэшировано ли уже изображение
- Установить атрибут src возвращается в "", или пустым, чтобы изображение не загружалось без необходимости
Примерно так ...
function is_cached(src) {
var img = new Image();
img.src = src;
var complete = img.complete;
img.src = "";
return complete;
}
У меня есть замечание по поводу ваших пустых источников изображений. Вы писали:
Итак, я визуализирую страницу с пустыми источниками изображений с источником, указанным в атрибуте "alt". Я вставляю источники изображений после события "window.onload", и он отлично работает.
Раньше у меня возникали проблемы с этим, потому что в некоторых браузерах пустые атрибуты src вызывают дополнительные запросы. Вот что они делают (скопировано из правил производительности Yahoo !, , есть также сообщение в блоге с более подробной информацией):
- Internet Explorer отправляет запрос в каталог, в котором страница расположена.
- Safari и Chrome отправляют запрос к самой странице.
- Firefox 3 и более ранние версии ведут себя так же, как Safari и Chrome, но версия 3.5 решает эту проблему [ошибка 444931] и больше не отправляет запросы.
- Opera ничего не делает при обнаружении пустого изображения src.
Мы также часто используем jQuery на нашем сайте, и не всегда удавалось избежать пустых тегов изображений. Я решил использовать прозрачный gif размером 1x1 пиксель, например: src = "t.gif" для изображений, которые я вставляю только после загрузки страницы. Он очень маленький и кешируется браузером. У нас это очень хорошо сработало.
Ура, Оливер