इमेज प्रीलोडिंग का उपयोग करने का एक बड़ा कारण यह है कि यदि आप किसी माउसओवर या: होवर ईवेंट पर किसी तत्व की पृष्ठभूमि-छवि के लिए किसी छवि का उपयोग करना चाहते हैं। यदि आप केवल उस पृष्ठभूमि-छवि को CSS में: hover स्थिति के लिए लागू करते हैं, तो वह छवि पहले तक लोड नहीं होगी: hover घटना और इस प्रकार उस क्षेत्र पर जा रहे माउस और वास्तव में दिखाई देने वाली छवि के बीच एक छोटा कष्टप्रद विलंब होगा ।
तकनीक # 1
तत्व की नियमित स्थिति पर छवि को लोड करें, केवल इसे पृष्ठभूमि की स्थिति के साथ हटा दें। फिर इसे हॉवर पर प्रदर्शित करने के लिए पृष्ठभूमि की स्थिति को स्थानांतरित करें।
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )तकनीक # 2
यदि प्रश्न के तत्व में पहले से ही एक पृष्ठभूमि-छवि लागू है और आपको उस छवि को बदलने की आवश्यकता है, तो ऊपर काम नहीं करेगा। आमतौर पर आप यहां स्प्राइट के लिए जाते हैं (एक संयुक्त पृष्ठभूमि छवि) और बस पृष्ठभूमि की स्थिति को शिफ्ट करें। लेकिन अगर यह संभव नहीं है, तो यह कोशिश करें। पृष्ठभूमि छवि को किसी अन्य पृष्ठ तत्व पर लागू करें जो पहले से ही उपयोग में है, लेकिन पृष्ठभूमि छवि नहीं है।
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )इस प्रीलोडिंग तकनीक के लिए उपयोग करने के लिए नए पेज तत्व का विचार आपके सिर में पॉप कर सकता है, जैसे # प्रीलोड-001, # प्रीलोड-002, लेकिन यह वेब मानकों की भावना के खिलाफ है। इसलिए आपके पृष्ठ पर पहले से मौजूद पृष्ठ तत्वों का उपयोग करना।
मेरे पास एक ही तत्व का उपयोग करने का प्रयास करने का विचार था, केवल उपयोग करें: छवि को लोड करने के लिए pseduo-class के बाद, इसलिए आपको अपने पेज पर काम करने के लिए पर्याप्त बाहरी पृष्ठभूमि-मुक्त छवियों के साथ काम करने की आवश्यकता नहीं है, लेकिन जो भी कारण उन्हें ठीक से लोड नहीं करना चाहते थे।
अधिक
जावास्क्रिप्ट सहित कुछ और तकनीकों के लिए इस लेख को देखें।