Картинка бэкграунд css: background-image | htmlbook.ru

Как предварительно загрузить фоновые изображения CSS

Часть 7 из 7 в AmplitudeJS: с нуля

Дэн Пастори 27 сентября 2018 г.

#AmplitudeJS

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

В AmplitudeJS мы рекомендуем дизайнерам/разработчикам устанавливать фоновое изображение элемента с помощью CSS. Таким образом, обработчик кликов остается с элементом и не может быть неправильно истолкован при нажатии на изображение. Например, когда мы реализуем кнопка амплитуда-воспроизведение-пауза и у нас есть состояние воспроизведения . Мы хотим, чтобы состояние воспроизведения было представлено кнопкой паузы , чтобы пользователь знал, когда воспроизводится звук, он может приостановить его. Мы хотим, чтобы они были фоновым изображением, чтобы события щелчка, привязанные к родительскому элементу, не интерпретировались неправильно при нажатии на дочерний элемент изображения.

Если вы помещаете изображение внутрь родительского элемента, javascript может работать неправильно.

Проблема с использованием фоновых изображений возникает при первом переключении (с приостановлено до воспроизведение ) мигает, пока загружается новый значок. Это не оптимальный UX. Мы хотим предварительно загрузить все фоновые изображения, чтобы не получить эту вспышку и получить упрощенное изменение между состояниями.

Настройка элемента предварительной загрузки

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

предварительная загрузка элемент вроде этого:

 <дел>


 svg" />




 

 раздел # предварительная загрузка {
    дисплей: нет;
}