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

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

    // Pre-load images
    [
      "/images/settings-click.png",
      "/images/poems-click.png",
    ].map((src) => {
      (new Image()).src = src;
    });

Оба изображения правильно загрузились при загрузке страницы (1), но снова перезагружались после наведения курсора на элементы (2) с побочными эффектами.

Логика наведения указана в CSS:

.settings:hover,
.settings:active,
.settings:focus {
  background: url("../images/settings-click.png") no-repeat;
  background-size: contain;
}

.poems:hover,
.poems:active,
.poems:focus {
  background: url("../images/poems-click.png") no-repeat;
  background-size: contain;
}