Загрузка картинок через асинхронные коллбэки в JavaScript
Давайте реализуем функцию loadImage
,
которая будет загружать картинки. Пусть первым
параметром эта функция принимает путь к картинке,
а вторым - коллбэк, который выполнится, когда
картинка будет загружена:
loadImage('img.png', function() {
// выполнится по загрузке картинки
});
Пусть в первый параметр нашего коллбэка попадает ссылка на DOM элемент картинки, а во второй - ошибка, если произойдет исключительная ситуация:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
Мы можем использовать нашу функцию следующим образом:
loadImage('image.png', function(image, err) {
document.body.append(image); // разместим картинку по загрузке
});
Либо с обработкой исключительной ситуации:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('произошла ошибка: ' + err);
}
});
Реализуйте функцию loadImage
. Используйте
для этого изученный вами ранее
код для загрузки
картинок.