जावास्क्रिप्ट में छवियों की अतुल्यकालिक लोडिंग

जावास्क्रिप्ट के माध्यम से गतिशील रूप से बनाई गई छवियाँ भी अतुल्यकालिक रूप से लोड होती हैं। उदाहरण के लिए निम्नलिखित कोड पर विचार करें:

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() {
	// छवि लोडिंग में त्रुटि
});

एक बटन बनाएं, जिसे दबाने पर एक छवि लोड होगी। छवि को तब दिखाएं जब वह लोड हो जाए। छवि लोड होने में समस्या होने पर एक संदेश प्रदर्शित करें।