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() {
	// ইমেজ লোড করতে ত্রুটি
});

একটি বাটন তৈরি করুন, যাতে ক্লিক করলে একটি ইমেজ লোড হবে। ইমেজটি লোড হয়ে গেলে এটি প্রদর্শন করুন। ইমেজ লোড করতে সমস্যা হলে একটি বার্তা প্রদর্শন করুন।