გამოსახულებების ასინქრონული ჩატვირთვა 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() {
	// გამოსახულების ჩატვირთვის შეცდომა
});

შექმენით ღილაკი, რომლის დაჭერისას ჩაიტვირთება გამოსახულება. აჩვენეთ გამოსახულება, როდესაც ის ჩაიტვირთება. გამოიტანეთ შეტყობინება პრობლემების შემთხვევაში გამოსახულების ჩატვირთვასთან დაკავშირებით.