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

Ответ 1

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

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

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

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

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

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

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

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

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

Ответ 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/

Ответ 3

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

Ответ 4

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

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