Картинка с плейсхолдерами
Условие
attachImageLoader(button, container, ImageCtor, url): по клику на кнопку · сразу показать плейсхолдер загрузки <div class="placeholder loading">; · при успехе заменить его на <img class="photo">; · при ошибке показать <div class="placeholder error">; · повторный клик заменяет старое содержимое, а не добавляет второе. Верни функцию отписки.
Что проверяют тесты
показывает плейсхолдер сразу
успех заменяет на картинку
ошибка показывает свой плейсхолдер
повторный клик не плодит содержимое
медленный первый ответ не перетирает второй
отписка снимает обработчик
Как подойти
Задача выглядит простой, но в ней спрятана та же гонка, что и в поиске: пользователь кликает дважды, и ответы приходят не в порядке кликов. Счётчик поколений решает это. Второй подвох - порядок присваивания src: картинка из кеша вызывает onload синхронно, и обработчик, навешенный после, не сработает. Третий - заменять содержимое, а не добавлять: replaceChildren делает это одним вызовом без ручной чистки.
Подсказки: 3
- Обработчики onload и onerror вешаются до присваивания src.
- Каждый клик начинает новое поколение: ответ старого поколения применять нельзя.
- replaceChildren заменяет содержимое одним вызовом.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.