How to preload images only once

Asked May 14 '20 at 19:41

Active May 14 '20 at 19:47

Viewed 1,357 times

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;
}

edited May 14 '20 at 19:47

asked May 14 '20 at 19:41

Dmytro Zarezenko

10,526
11
62
104

What does the hover code look like? – Get Off My Lawn May 14 '20 at 19:44
4

You also have `Disable cache` enabled, so it isn't going to load the cached version. – Get Off My Lawn May 14 '20 at 19:47
@GetOffMyLawn I have enabled cache but situation is the same. How can I be sure that images will be loaded in any browser without side effects on hover? – Dmytro Zarezenko May 14 '20 at 20:10
There are some CSS only solutions here https://stackoverflow.com/questions/1373142/preloading-css-images – imvain2 May 14 '20 at 21:01

How to preload images only once

0 Answers0