बैकग्राउंड इमेज लोडर का उपयोग करना

आप बॉडी टैग पर बैकग्राउंड इमेज सेट करके यह जांचने का प्रयास कर रहे हैं कि बैकग्राउंड इमेज लोड हुई है या नहीं और फिर लोड() फ़ंक्शन का उपयोग करें। हालाँकि, यह दृष्टिकोण पृष्ठभूमि छवियों के लिए प्रभावी ढंग से काम नहीं करता है।

वास्तव में यह सुनिश्चित करने के लिए कि पृष्ठभूमि छवि पूरी तरह से लोड हो गई है, आप एक अलग तकनीक का उपयोग कर सकते हैं:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

यह विधि मेमोरी में एक नई छवि बनाती है और एक लोड इवेंट श्रोता को इसके साथ जोड़ती है। एक बार छवि लोड हो जाने के बाद, लोड इवेंट ट्रिगर हो जाता है, और पृष्ठभूमि छवि बॉडी टैग पर सेट हो जाती है।

वेनिला जावास्क्रिप्ट में, इसे इस प्रकार कार्यान्वित किया जा सकता है:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url('   src   ')';
});
image.src = src;

आप छवि लोडिंग को संभालने और एक वादा वापस करने के लिए एक अमूर्त फ़ंक्शन भी बना सकते हैं:

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

यह दृष्टिकोण आपको पृष्ठभूमि छवि लोडिंग के पूरा होने की विश्वसनीय रूप से जांच करने की अनुमति देता है और यह सुनिश्चित करता है कि छवि पूरी तरह लोड होने के बाद ही कोड निष्पादित किया जाता है।