How to preload images only once

Question

I'm trying to preload images in my Vue.js project but looks like images loaded twice on hover. My images preload code:

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

Both images loaded properly on the page load (1) but reloaded again after elements hover (2) with side effects.

The hover logic is in 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;
}