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

В качестве предисловия я пришел из фона JS и довольно новичок в Ruby on Rails, поэтому это может быть глупый вопрос, но как мне предварительно загрузить ресурс изображения (SVG)? Вот что происходит...

У меня есть настраиваемые флажки / радио, которые используют разные SVG для отмеченных / снятых состояний. Когда пользователь впервые заходит на мой сайт и щелкает по флажку, чтобы выбрать его, он видит быстрое "мигание". Это происходит из-за того, что актив с состоянием "отмечен" не извлекается, пока не произойдет щелчок. После кэширования актива проблема больше не возникает. Есть ли способ Ruby on Rails для предварительной загрузки этого ресурса в DOM?

Я попытался выяснить, как это сделать через конвейер активов, но без особого успеха. Я также используюsass-rails драгоценный камень, но с использованием asset-pathу меня не работает. Это пример моего кода.

.custom-checkbox::before {
  ...
  background-image: url(asset_path('check_box_unchecked.svg'));
}

.custom-checkbox::after {
  ...
  background-image: url(asset_path('check_box_checked.svg'));
}

Я могу предотвратить проблему с миганием, сделав это в моем <head/> тег, но он кажется неприятным, потому что я должен копировать его в каждый из моих макетов

<%= image_tag('check_box_checked.svg', style: 'display:none;') %>

0 ответов

Другие вопросы по тегам