Зазвичай зображення завантажуються під час їх створення. Тому, коли ми додаємо <img> на сторінку, користувач не відразу бачить зображення. Спочатку його потрібно завантажити браузеру.

Щоб відразу показати зображення, ми можемо створити його “заздалегідь”, наприклад:

let img = document.createElement('img');
img.src = 'my.jpg';

Браузер починає завантажувати зображення і запам’ятовує його в кеші. Пізніше, коли те саме зображення з’являється в документі (незалежно від того, як), воно з’являється негайно.

Створіть функцію preloadImages(sources, callback), яка завантажує всі зображення з масиву sources і, коли буде готова, запускає callback.

Наприклад, після завантаження зображень буде відображатися alert:

function loaded() {
  alert("Зображення завантажені")
}

preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);

У разі помилки функція все одно повинна вважати картинку “завантаженою”.

Іншими словами, callback виконується, коли всі зображення завантажуються або є помилка.

Ця функція корисна, наприклад, коли ми плануємо показати галерею з великою кількістю зображень, які можна прокручувати, і хочемо бути впевненими, що всі зображення завантажені.

У вихідному документі ви можете знайти посилання на тестові зображення, а також код, щоб перевірити, завантажені вони чи ні. Він має вивести 300.

Відкрити пісочницю для завдання.