append синхронный, а вот загрузка картинки нет, к счястью у node элемента img есть события load/error
Пример es5 jquery, если пишите на es6+, то логика та же но вместо $.Deferred -> Promise
var urls = [
'https://picsum.photos/id/345/2000/2000',
'https://picsum.photos/id/347/2000/2000',
'https://picsum.photos/id/349/2000/2000',
'https://picsum.photos/id/320/2000/2000',
'https://picsum.photos/id/351/2000/2000',
'https://picsum.photos/id/372/2000/2000'
];
var $wrapper = $('.wrapper');
urls.forEach(function (url) {
createImage(url).then(function (image) {
var $image = $(image);
$wrapper.append($image);
console.log({
width: $image.width(),
height: $image.height()
});
}).fail(function (image) {
console.error('Ошибка загрузки картинки');
});
});
function createImage(url) {
var $deferred = $.Deferred();
$('<img/>', {
src: url
}).one({
load: function () {
$deferred.resolve(this);
},
error: function () {
$deferred.reject(this);
}
});
return $deferred;
}