кеш фоновое изображение

Question

Есть ли способ «кэшировать» фоновое изображение.

Например .. Фоновое изображение имеет размер 3x3px и устанавливается так:

body {
    background: #000 url(bg.png);
}

Когда происходит обновление, фоновое изображение "мигает "на секунду.

Есть ли кросс-браузерное решение?(для сервера Apache / PHP, если это уместно)

---

Если вы зайдете на seo.hr и просмотрите навигацию, ... вы увидите, что я пытаюсь сделать.

http://www.seo.hr/

http://www.seo.hr/usluge/izrada-stranica

http://www.seo.hr/usluge/optimizacija-za-trazilice

Answer 1

Я думаю, вам нужно сначала определить, действительно ли проблема связана с кэшированием или она вызвана размером вашего изображения.Вы можете использовать такую ​​программу, как Wireshark или Fiddler, но, честно говоря, это излишне для ваших нужд, и у вас, вероятно, уже есть браузер с инструментами разработчика.

Вот как вы определяете, откуда исходит изображениеChrome (другие браузеры аналогичны).

1. Откройте инструменты разработчика и перейдите на вкладку «Сеть».
2. Найдите «bg.png» в списке сетевых запросов инажмите на его имя.Ниже приведен пример выбора изображения переполнения стека на этой странице.

Обратите внимание, что в нем указано состояние 200 (из кэша).Браузеру не нужно было выходить на сервер и запрашивать этот ресурс.Он использовал кеш.Если этот текст «из кэша» отсутствовал, он не использовал повторно кэшированные ресурсы.

Существует также вероятность того, что вы получите код состояния 304. Это означает, что сервер сказал, что изображение не былоне изменяется с момента последнего запроса, который вы сделали.В этом случае вы отключаете сервер.

Хорошо, значит, мое изображение не было в кеше ... что теперь?

Есть несколько причин, по которымэто может произойти.

1. Ваш заголовок запроса не настроен на указание браузеру кэшировать изображение (также находится на той же вкладке «Заголовки», что вы видели этот код состояния, еслибраузер фактически пошел на сервер для изображения).Вы захотите установить cache-control и expires на то, что имеет смысл для вас.Заголовки кэша могут стать немного сложнее, вы можете просмотреть этот учебный документ по кэшированию .
2. Это SSL?Если так, то не все браузеры кешируют это, но большинство современных браузеров делают это.Установите cache-control: public на этих изображениях (и срок их действия также истекает).

Реальный вопрос здесь в том, как это исправить?К сожалению, это полностью зависит от сервера и / или используемой вами платформы.Поскольку ОП использует Apache, они могут найти отличную документацию по модулю Apache mod_expires, чтобы выяснить, как настроить кэширование для своего сайта .

Answer 2

Да !

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

• Чистый HTML / CSS
• Только Javascript
• Смешанный HTML / CSS / Javascript
• Использование base64 для кодирования изображения где-то в исходном коде

На этом этапе яРекомендую смешанный раствор, используя JavaScript.Это заставит его работать во многих браузерах, насколько это возможно.

Есть хороший учебник по адресу: http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

Наличие нескольких изображений в одном может сделать шаг вперед, так что проверьте эту статью спрайтов: http://www.alistapart.com/articles/sprites/

Answer 3

Вы можете попытаться закодировать ваше изображение в base64 и поместить его непосредственно в исходный код CSS. Я нашел вопрос о плюсах и минусах по поводу здесь .

Answer 4

Сделайте ваше мозаичное изображение намного больше, когда движок браузера отображает страницу, он должен умножить каждую плитку, чтобы покрыть всю ширину и длину вашего объекта, что приводит к плохой производительности с маленькими плитками на больших объектах.

Маленькие плитки -> больше повторений -> медленная производительность