HTML में preload नामक एक एट्रिब्यूट होता है जो आपको ब्राउज़र को इस बारे में हिंट देने की अनुमति देता है कि एसेट्स को पेज लोड होने पर कैसे, और अधिक महत्वपूर्ण रूप से कब लोड करना है।
preload एट्रिब्यूट कई HTML एलिमेंट्स पर उपयोग किया जा सकता है। उदाहरण के लिए, आप इसे <link> एलिमेंट पर जोड़ सकते हैं ताकि ब्राउज़र आपकी CSS स्टाइलशीट के लिए अर्ली फेच शुरू करे।
नहीं preload एट्रिब्यूट का उपयोग अपने <link> पर इस तरह करें (जैसा कि कुछ वेबसाइट्स सुझाते हैं):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">क्योंकि उपरोक्त कोड केवल आपकी स्टाइलशीट को प्रीलोड करता है, यह इसे लागू नहीं करता।
इसके बजाय, अपनी स्टाइलशीट को दोनों प्रीलोड और लागू करने के लिए (जैसे ही यह प्रीलोड हो चुकी है), आप अपने <link> एलिमेंट पर एक इंलाइन JS onload इवेंट हैंडलर का उपयोग कर सकते हैं:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">JS onload इवेंट हैंडलर तब लिंक एलिमेंट के rel="preload" एट्रिब्यूट को rel="stylesheet" में बदल देगा जैसे ही यह लोड हो जाता है।
उपरोक्त कॉन्फ़िगरेशन के साथ, preload का समर्थन करने वाले ब्राउज़र्स CSS स्टाइलशीट को पहले डाउनलोड करना शुरू कर देंगे यदि आप एट्रिब्यूट का उपयोग नहीं करते।
ब्राउज़र सपोर्ट
preload एट्रिब्यूट फ़ायरफ़ॉक्स में अभी तक समर्थित नहीं है (विचित्र रूप से), लेकिन यह अन्य सभी आधुनिक ब्राउज़र्स में काम करता है। आप अभी भी preload एट्रिब्यूट का उपयोग कर सकते हैं, लेकिन यह केवल फ़ायरफ़ॉक्स में आपकी CSS को प्रीफेच नहीं करेगा (यह सामान्य रूप से लोड होगा)।
