Upakiaji wa Picha Kwa Wakati Mmoja kwenye JavaScript

Picha ambazo zinaundwa kwa nguvu kupitia JavaScript, pia hupakuliwa kwa wakati mmoja. Tuchunguze mfano ufuatao wa msimbo:

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

Kama unavyoona, hapa tunaunda kitambulisho img, tunaandika kwenye src yake njia ya picha na kuweka picha hiyo kwenye body. Hata hivyo, picha haitaonekana kwenye ukurasa mara moja. Jambo ni kwamba tunapoandika kwenye src njia ya picha - kivinjari huanza kupakua picha hiyo kutoka tovuti. Picha itakapopakuliwa, ndipo tu kivinjari kitaweza kuionyesha.

Ikiwa picha ni kubwa ya kutosha, na kasi ya intaneti ni ndogo ya kutosha, basi mtumiaji wa tovuti kwa muda fulata aweza "kufurahiya" picha tupu - hadi itakapopakiwa.

Kwa kweli kitambulisho img kina tukio load, ambalo hufanyika wakati upakiaji wa picha unapokamilika:

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

image.addEventListener('load', function() {
	// litafanyika picha ikishapakuliwa
});

Tunaweza kutumia hii, kuweka picha kwenye ukurasa, tu wakati picha hiyo itakapopakiwa:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // kuweka picha ikishapakuliwa
});

Picha haipaswi kupakuliwa: inaweza kuwa kwamba njia ya picha si sahihi, au kuna mgawanyiko wa intaneti, kuvunjika kwa seva ya tovuti au kitu kama hicho. Kwa kusema kwa maneno mengine - hali ya kipekee. Katika kesi hii, haitafanyika tukio load, bali tukio error litafanyika:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// hitilafu ya upakiaji wa picha
});

Tengeneza kifungo, ubonyeze ambapo picha itapakuliwa. Onyesha picha, itakapopakiwa. Toa ujumbe ikiwa kuna matatizo ya upakiaji wa picha.