Как предварительно загрузить стиль изображения, чтобы использовать его, когда сервер не работает?

Question

У меня есть виджет javascript, который показывает состояние сервера с изображением светодиода тревоги.Изображение выбирается путем применения соответствующего класса к элементу DOM с соответствующим стилем в CSS.

Проблема в том, что когда сервер не работает, он не может предоставить файл изображения для стиля.Итак, моя кнопка просто выглядит пустой.

Вопрос в следующем: как предварительно загрузить изображение в кэш браузера, чтобы оно могло и отображалось, когда сервер не работает?

Answer 1

Вы можете предварительно загрузить изображение, создав элемент img и назначив путь к src:

var img = document.createElement('img');
img.src = "/path/to/image";

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

img.style.position = "absolute";
img.style.left = "-10000px";
document.body.appendChild(img);

Это загружает его, но выключено-страница, где пользователь этого не увидит.Возможно, даже лучше сделать это с любым элементом, на котором вы фактически отображаете изображение, а затем просто переместить элемент туда, где он должен быть при отображении, чтобы браузер не отправлял новый GET сIf-Modified-Since когда вы показываете это, но теоретически, если ваши заголовки кэша верны, браузер не должен этого хотеть.

Answer 2

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

Я бы сделал одно из следующих действий:

1. Используйте простые стили для создания эффекта оповещения (огромная рамка, ярко-красный и т. Д.)
2. Загрузите изображение в (надежный) сторонний сервис. Их несколько.

Таким образом, вы не зависите от того, правильно ли работает ваш код или сервер, чтобы оповещение работало, когда, по-видимому, именно это вы пытаетесь отслеживать с помощью этого проекта.

Answer 3

Вы можете определить фон из данных: изображение. Проверьте: здесь или здесь .