जावास्क्रिप्ट से इमेज प्रीलोडिंग कैसे करें?

आप निम्नलिखित विधि का उपयोग करके जावास्क्रिप्ट से इमेजेस प्रीफेच कर सकते हैं:

function preloadImage(url) {
  let img = new Image();
  img.src = url;
  return img;
}

ध्यान दें कि सभी ब्राउज़र्स इमेज को कुछ सेकंड बाद रिलीज़ (गारबेज कलेक्ट) कर देंगे यदि आपने उसका उपयोग नहीं किया है। इससे बचने के लिए, img ऑब्जेक्ट का रेफरेंस रखें।

व्यावहारिक उपयोग

// मल्टीपल इमेजेस प्रीलोड करें
function preloadImages(urls) {
  return urls.map(url => {
    const img = new Image();
    img.src = url;
    return img;
  });
}

// उपयोग
const imageUrls = [
  '/images/hero.jpg',
  '/images/gallery/1.jpg',
  '/images/gallery/2.jpg'
];

const preloadedImages = preloadImages(imageUrls);

// बाद में उपयोग - तुरंत दिखेगा (कैश्ड)
document.getElementById('hero').src = imageUrls[0];

लोडिंग स्टेट्स हैंडल करना

function preloadImageWithPromise(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load: ${url}`));
    img.src = url;
  });
}

// उपयोग
async function loadAllImages(urls) {
  try {
    const images = await Promise.all(urls.map(preloadImageWithPromise));
    console.log('सभी इमेजेस लोड हुईं');
    return images;
  } catch (error) {
    console.error('कुछ इमेजेस लोड नहीं हुईं:', error);
  }
}

प्रीलोड हिंट (HTML)

<!-- HTML में प्रीलोड -->
<link rel="preload" as="image" href="/images/hero.jpg">
<link rel="prefetch" href="/images/next-page.jpg">

मुख्य बिंदु: प्रीलोडेड इमेजेस को रेफरेंस में रखें ताकि गारबेज कलेक्शन से बचा जा सके।