Как проверить находится ли изображение в кэше браузера?

Question

[Onatskyi]

Добрый день! Подскажите, есть ли возможно проверить было ли закэшировано изображение браузером?
Хочу чтобы картинки, которые грузятся, появлялись после загрузки плавно. А те картинки которые были уже закэшированы - появлялись моментально. Как можно это реализовать? Заранее спасибо!

Answer 1

[Vitaliy]

Никак https://stackoverflow.com/a/22232012

Если будет достаточно определения с какой-то вероятностью, тогда такой вариант подойдет (для проверки в Network отметьте Disable cache и нажмите любую клавишу)
Идея в следующем: вычислять соотношение времени загрузки изображения к его размеру, и если результат менее 2% (ms/size * 100), тогда считать, что изображение было взято из кэша, так как оно слишком быстро загрузилось

В моем случае подходит < 0.02, но все может зависеть от железа и сети.

Comments

[Onatskyi]

Я тоже думал над таким вариантом, но придумал другой. При первой загрузки изображения, его обозначение (путь к примеру) помещаем в localStorage. И с помощью него проверяем, есть ли было ли скачано изображение, или нет. Думаю такой вариант идеально подойдет для реализации моей задачи.

[AngReload]

А зачем нужна анимация если картинка из сети загрузилась за несколько миллисекунд?
Почему проверяется не время загрузки, а факт наличия в кэше?

[Onatskyi]

AngReload, ну если картинка есть в кэше, значит она моментально и загрузится. Если нету, то она будет грузится, и скорость загрузки зависит от разных факторов. Пока изображение грузится, на заднем фоне стоит иконка картинки. А после, как изображение загрузилось, оно плавно появляется поверх иконки. Вот. Можно конечно через скорость загрузки это все делать. Но, как по мне, это костыль.

Answer 2

[Артем]

Например, так

Comments

[Onatskyi]

А таким образом она не загружается в любом случае?

[Артем]

Хороший вопрос. Думаю, что нет. Попробуйте - узнаете )

[Onatskyi]

Артем, проверил.) Функция загружает изображение и следовательно в любом случае возвращает true.