JavaScript-de suratlary ýüklemekde asinkronlyk

JavaScript arkaly dinamiki döredilen suratlar hem asinkron ýüklenýär. Mysal üçin aşakdaky koda serediň:

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

Görşüňiz ýaly, bu ýerde biz img tegi döredýäris, onuň src atributyna surat ýoluny ýazýarys we bu suraty body-e ýerleşdirýäris. Emma surat sahypada derrew görünmez. Sebäbi, biz src-a surat ýoluny ýazanymyzda - brauzer şu suraty sahypadan ýükleýär. Surat ýüklenen wagty, şol wagt brauzer ony görkezip bilýär.

Eger surat ýeterlik uly bolsa, we internet tizligi ýeterlik kiçi bolsa, onda sahypanyň ulanyjysy surat ýüklenýänçä boş suratly ýere "seredip" biler.

Aslynda img teginde load wakasy bar, bu waka suratyň ýüklenmesi tamamlananda işleýär:

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

image.addEventListener('load', function() {
  // surat ýüklenende işleýär
});

Biz muny, sahypada suraty diňe surat ýüklenen wagty ýerleşdirmek üçin ulanyp bileris:

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // ýüklenende ýerleşdirýäris
});

Surat hökmany ýüklenmez: mümkin surat ýoly nädogry bolsa, ýa-da internet kesilse, sahypa serweri ýaralyp ýa-da şuňa meňzeş bir zat bolup bilýär. Başga sözler bilen aýdylanda - ýüz tutulýan ýagdaý. Bu ýagdaýda load wakasy däl, eýsem error wakasy işleýär:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // surat ýüklemekde säwlik
});