Как реализовать загрузку всех картинок на странице при использовании реактивное переменной во Vue?

Question

[Евгений]

Есть код вида

<div>
        <img  v-scroll="handleScroll" :src="image">
    </div>

Переменная image содержит в себе ссылку на картинку, которая меняется в зависимости от скролла на странице. Всего картинок четыре.
Проблема: сервер медленный и находится далеко. Ссылка на картинку меняется, браузер, увидев новую ссылку грузит ее пару секунд, что приводит к глючной смене картинки на пару секунд позже, чем хотелось бы.

Каким образом можно загрузить стразу все четыре картинки, чтобы браузер менял их мгновенно? Видел в документации директиву v-show, но не совсем понимаю как ее использовать.
Возможно, тут нужен совсем другой подход к смене ссылок на картинки и как делаю я - совсем сомнительный код.

Comments

[v1t3man]

церез цикл
https://ru.vuejs.org/v2/guide/list.html

Answer 1

[Михаил]

Каким образом можно загрузить стразу все четыре картинки, чтобы браузер менял их мгновенно?

Погуглите по фразе "javascript предзагрузка изображений".
Суть что в начале работы, вы просто создаете в коде элемент img и ему src вручную ставите на вашу картинку, браузер соответственно эту картинку загрузит и она уже будет в кеше, т.е. быстро будет доставаться