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