बड़ी सीएसएस छवियों में एक लोडिंग आइकन जोड़ें

आइए कल्पना करें कि आपके पेज पर बड़ी तस्वीरें हैं और आप चाहते हैं कि उपयोगकर्ता यह जान सकें कि वे लोड कर रहे हैं। जावास्क्रिप्ट का उपयोग करते हुए, आप सभी छवियों पर एक एनिमेटेड आइकन एम्बेड कर सकते हैं जो अभी तक अपलोड नहीं किए गए हैं, लेकिन हम आपको एक सरल और क्लीनर तरीके की पेशकश कर सकते हैं।

चरण 1: एनिमेटेड आइकन का पता लगाएं

कई साइटें हैं जहां आप डाउनलोडर के लिए अपनी खुद की छवि बना सकते हैं। हमारा पसंदीदा यह है । मुख्य बात यह नहीं है कि एक आइकन चुनना है जो बहुत अधिक वजन का होगा। यहाँ एक है जिसे हमने बनाया है:

चरण 2: सीएसएस नियम जोड़ें

बहुत कम कोड है, और आप इसे कॉपी कर सकते हैं। बस "youricon.gif" को अपनी तस्वीर में बदलना याद रखें।

.load { background: url('images/youricon.gif') no-repeat center; } 

चरण 3: कोड लागू करें

कई तरीके हैं, लेकिन सबसे अच्छा है load क्लास के साथ एक div में अधिक चित्रों को लपेटना। आपको चित्र की चौड़ाई और ऊंचाई निर्धारित करने की आवश्यकता है।

 <div class="load" style="width:200px;height:200px"> <img src="large.jpg" alt="alternate text" /></div> 

आप यहां रिजल्ट देख सकते हैं।

जैसा कि लिम ची औन ने हमें बताया, आप छवि को एक div में लपेट नहीं सकते हैं, लेकिन इसे इस तरह से करें:

 <img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" /> 

लेकिन जिस कारण से हमने शुरुआत में इस पद्धति का उल्लेख नहीं किया, वह यह है कि यदि चित्र लोड नहीं किया गया था, तो यह आपकी साइट की उपस्थिति को खराब कर सकता है (ऐसा लगता है कि लेख के लेखक IE - लगभग अनुवाद के तहत बैठे हैं।) यदि आप पूरी तरह से आश्वस्त हैं कि आपको डाउनलोड में कोई समस्या नहीं होगी, तो आपको ऐसा लगेगा कि लोडर आइकन केंद्रित नहीं होगा और आपके पास बहुत सारी तस्वीरें हैं, तो यह समाधान आपके लिए उपयुक्त हो सकता है:

 img { background: url('images/youricon.gif') no-repeat center; } 

लेकिन सावधान रहें - यदि आपके पास बूटलोडर पर एक सफेद पृष्ठभूमि है, तो यह काली पृष्ठभूमि पर गिर सकता है, उदाहरण के लिए, साइड कॉलम में (ऐसा लगता है कि पारदर्शी पृष्ठभूमि वाले आइकन पहले से ही कोषेर नहीं हैं - लगभग अनुवाद।) । इसलिए, ऐसा करना बेहतर है:

 #yourcontentdiv img { background: url('images/youricon.gif') no-repeat center; } 

अंतिम परिणाम देखें!