JavaScript-и картинкаҳоро асинхронӣ бор кардан

Картинкаҳое, ки тавассути JavaScript сохта мешаванд, инчунин асинхронӣ бор карда мешаванд. Барои мисол рамзи зеринро дида мебароем:

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

Чун мебинед, дар ин ҷо мо теги img-ро месозем, дар src-и он роҳи картинкаро менависем ва ин картинкаро дар body ҷойгир мекунем. Аммо картинка дар саҳифа фавран пайдо намешавад. Дар асл, вақте ки мо дар src роҳи картинкаро навистем - браузер бор кардани ин картинкаро аз сомона оғоз мекунад. Вақте ки картинка бор карда шуд, фақат пас аз он браузер метавонад онро нишон диҳад.

Агар картинка хеле калон бошад, ва суръати интернет хеле кам бошад, он гоҳ корбари сомона барои муддате метавонад картинкаи холӣро "дида лаззат барад" - то он ки бор карда нашавад.

Дар асл, барои теги img воқеаи load мавҷуд аст, ки вақти ба поён расидани боркунии картинка рӯй медиҳад:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// вақти бор кардани картинка рӯй медиҳад
});

Мо метавонем аз ин истифода кунем, то картинкаро дар саҳифа фақат он вақт ҷойгир кунем, ки ин картинка бор карда шавад:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // вақти бор кардан ҷойгир мекунем
});

Картинка албатта бор карда намешавад: шояд роҳи картинка нодуруст бошад, ё интернет қатъ шавад, сервери сомона вайрон шавад ё чизе монанди он рӯй диҳад. Ба дигар сухан - вазъияти истисноӣ. Дар ин ҳолат воқеаи load рӯй намедиҳад, балки воқеаи error рӯй медиҳад:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// хатои боркунии картинка
});

Тугмае созед, ки пахш кардани он картинкаро бор кунад. Картинкаро нишон диҳед, вақте ки он бор карда шавад. Дар сури проблемҳо бо боркунии картинка паёмеро чоп кунед.