JavaScript တွင် ပုံများကို အဆင်ပြေစွာ ဖွင့်ခြင်း

JavaScript မှတစ်ဆင့် ပြောင်းလဲဖန်တီးထားသော ပုံများသည်လည်း အဆင်ပြေစွာ ဖွင့်လေ့ရှိသည်။ ဥပမာအနေဖြင့် အောက်ပါကုဒ်ကို လေ့လာကြည့်ပါမည်။

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

သင်မြင်တွေ့ရသည့်အတိုင်း ဤတွင် ကျွန်ုပ်တို့သည် img တဂ်ကို ဖန်တီးပြီး ၎င်း၏ src တွင် ပုံလမ်းကြောင်းကို ရေးထည့်ကာ ထိုပုံကို body အတွင်း ထည့်သွင်းပါသည်။ သို့သော် ပုံသည် စာမျက်နှာပေါ်တွင် ချက်ချင်းပေါ်လာမည် မဟုတ်ပါ။ အကြောင်းမှာ ကျွန်ုပ်တို့က src တွင် ပုံလမ်းကြောင်းကို ရေးထည့်လိုက်သောအခါ ဘရောက်ဇာသည် ဝဘ်ဆိုဒ်မှ ထိုပုံကို ဒေါင်းလုဒ်ဆွဲရန် စတင်လိုက်ပြီ ဖြစ်သည်။ ပုံဒေါင်းလုဒ်ဆွဲပြီးသည့်အခါမှသာ ဘရောက်ဇာက ၎င်းကို ပြသပေးနိုင်မည် ဖြစ်သည်။

ပုံသည် အလွန်ကြီးမားပြီး အင်တာနက် အရှိန်သည် အလွန်နှေးနေပါက ဆိုဒ်အသုံးပြုသူသည် ပုံဖွင့်မပြီးမချင်း ဗလာ ပုံအား အချိန်အတန်ကြာ "ကြည့်ရှု" နေရနိုင်သည်။

တကယ်တော့ img တဂ်တွင် load ဆိုသည့် အဖြစ်အပျက်တစ်ခု ရှိပါသည်၊ ၎င်းသည် ပုံဒေါင်းလုဒ်ဆွဲပြီးစီးသောအခါတွင် အလုပ်လုပ်ပေးသည်။

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

image.addEventListener('load', function() {
  // ပုံဒေါင်းလုဒ်ဆွဲပြီးစီးချိန်တွင် အလုပ်လုပ်မည်
});

ပုံကို ဒေါင်းလုဒ်ဆွဲပြီးမှသာ စာမျက်နှာပေါ်တွင် ထည့်သွင်းရန် ကျွန်ုပ်တို့သည် ဤအရာကို အသုံးပြုနိုင်သည်။

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // ဒေါင်းလုဒ်ဆွဲပြီးချိန်တွင် ထည့်သွင်းသည်
});

ပုံသည် ဒေါင်းလုဒ်ဆွဲရမည်ဟု အာမခံချက် မရှိပါ။ ပုံလမ်းကြောင်း မှားယွင်းနေခြင်း၊ သို့မဟုတ် အင်တာနက် ပြတ်တောက်ခြင်း၊ ဆိုဒ်ဆာဗာပျက်စီးခြင်း သို့မဟုတ် အလားတူ အရာတစ်ခုခု ဖြစ်နိုင်သည်။ တစ်နည်းအားဖြင့်ဆိုသော် - ခြွင်းချက်အခြေအနေ ဖြစ်သည်။ ထိုသို့ဖြစ်ပါက load အဖြစ်အပျက် မဟုတ်ဘဲ error အဖြစ်အပျက်က အလုပ်လုပ်မည် ဖြစ်သည်။

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // ပုံဒေါင်းလုဒ်ဆွဲရာတွင် အမှား
});