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() {
	// පින්තූර පූරණ දෝෂය
});

බොත්තමක් සාදන්න, එය ඔබාම පින්තූරයක් පූරණය වේ. පින්තූරය පූරණය වූ විට එය පෙන්වන්න. පින්තූරය පූරණය කිරීමේ ගැටලු ඇති විට පණිවුඩයක් ප්‍රදර්ශනය කරන්න.