Как предварительно загрузить графику моей навигационной панели

Question

Я создал и закодировал свою собственную панель навигации CSS (вдохновленную Apple, если это поможет вам визуализировать), это означает, что у меня есть динамические кнопки с 4 состояниями, которыми я управляю с помощью таблицы стилей CSS.У меня есть только две графики, одна с состояниями кнопок, а другая со стилизованным «текстом».

Тем не менее, я хотел бы сделать так, чтобы графика наб-бара была предварительно загружена на моих веб-страницах.

1) это возможно?

2) это полезно?

3) если да на оба вопроса, какой будет код?

Answer 1

Я не вижу смысла в предварительной загрузке этих изображений. Если изображения статичны и всегда ссылаются на один и тот же файл без параметров, они все равно будут кэшироваться браузером и загружаться только при первом посещении вашего сайта посетителем (если только вы не запретите кэширование с некоторыми причудливыми настройками заголовка http) и обслуживаться. из кеша браузера клиента на дальнейшие запросы. У вас есть пример вашей навигации?

если вы беспокоитесь о времени загрузки, вы можете легко иметь навигацию, аналогичную apple.com, используя css3-градиенты для фона, радиус границы для внешнего контейнера и объявляя только фоновое изображение в вашей таблице стилей IE как запасной вариант опция, поэтому современные браузеры не будут запрашивать фоновый шаблон IE.

Добавьте смещение текста размером в 1 пиксель, чтобы придать вашей навигации 3D-вид.

Answer 2

Вы можете предварительно загрузить изображения либо с помощью JavaScript, либо вставив теги img в начале страницы со стилем, чтобы скрыть их.

Пример JavaScript:

<script>
image = new Image();
image.src = '/path/to/image.png';
</script>

Вам нужно будет выполнить «image = ...», «image.src = ...» для каждого изображения, которое вы хотите предварительно загрузить. Этот код загрузит изображение в кеш браузера.

Пример HTML / CSS:

<img src="/path/to/image.png" style="display: none;" />

Выше будет загружено изображение, но не будет отображаться на странице.