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() {
	// суретті жүктеу кезіндегі қате
});

Басылуымен сурет жүктелетін батырма жасаңыз. Сурет жүктелген кезде оны көрсетіңіз. Суретті жүктеу кезіндегі проблемалар туралы хабарлама шығарыңыз.