Как ускорить загрузку или даже предзагрузить фото для сайта?

Question

[Aladdin]

Есть сайт и добавлен эффект hover и при наведении должна одна картинка заменяться другой, так и есть, но при первой такой загрузки экран на доли секунд становится белым(загрузка фото, не знаю как это назвать). Итак, как же сделать, чтобы фото сразу предзагрузилось, ведь после первого раза все работает как надо

Link----> codepen.io/MrTabrest/pen/egzWZO?editors=1100 <----Link

Answer 1

[Максим Тимофеев]

Предзагрузка - поиск по яндексу рулит:
https://yandex.ru/search/?text=предзагрузка%20карт...
Предзагрузка - поиск по тостеру рулит:
Предварительная загрузка изображений на jquery?

Answer 2

[dom1n1k]

Самое простое - засунуть в верстку обе картинки отдельными элементами, но одну из них скрыть через visibility или opacity. А при ховере менять их местами.
Но тут будет побочный эффект - скрытые картинки будут грузиться вперемешку с главными, замедляя загрузку в целом. Если картинок немного, то пофиг. Если много, придется использовать JS, который сначала дождется загрузки первых картинок и только потом в фоне подгрузит первые.
В целом ничего сложного, всё легко гуглится.