कैसे एनिमेटेड GIF खेलने के लिए पर क्लिक करें

एनिमेटेड जीआईएफ एक डिजाइन अवधारणा की कल्पना करने का एक लोकप्रिय तरीका है (यहां उदाहरण है कि हमने इसे सीएसएस के साथ बनाए गए पोस्ट पाठ प्रभावों के लिए कैसे किया) या एक छोटी वीडियो क्लिप दिखाते हैं। लेकिन अगर आपके पास एक ही पृष्ठ में उनमें से बहुत सारे हैं, तो यह आपके उपयोगकर्ता का ध्यान भटका देगा. बहुत सारे GIF दिखाने वाले पृष्ठों के लिए, यह बुरी खबर है.

समाधान: उपयोगकर्ताओं को स्थिर छवि के साथ सेवा दें और केवल एनिमेटेड GIF को उपयोगकर्ता-क्लिक पर चलने दें. इस छोटे से ट्यूटोरियल में हम आपको यह दिखाने जा रहे हैं कि कैसे करें.

• डेमो देखें
• स्रोत डाउनलोड करें

शुरू करना

एक एचटीएमएल फ़ाइल, jQuery, और अंत में एक जावास्क्रिप्ट फ़ाइल जहाँ हम अपना कोड लिखेंगे: प्रोजेक्ट फोल्डर और फाइलें तैयार करना शुरू करें। आप jQuery को एक सीडीएन से लिंक कर सकते हैं या कॉपी को पकड़ सकते हैं और इसे अपनी परियोजना निर्देशिका से जोड़ सकते हैं। मैं आपकी कल्पना में शैलियों और सीएसएस को छोड़ दूंगा। HTML मार्कअप का सबसे आवश्यक हिस्सा इस प्रकार है:

अतिरिक्त सूचना दें डेटा-alt में विशेषता img तत्व। यह वह जगह है जहां हम GIF को स्थिर छवि के स्थान पर संग्रहीत करते हैं, जिसे हम शुरू में सेवा करते हैं। आप अधिक छवियां जोड़ सकते हैं और प्रत्येक के लिए एक कैप्शन भी जोड़ सकते हैं figcaption तत्त्व.

उसके बाद, हम जावास्क्रिप्ट लिखेंगे जो जादू लाएगा। जब उपयोगकर्ता छवि पर क्लिक करता है, तो GIF छवि परोसने का विचार है.

जावास्क्रिप्ट

सबसे पहले, हम एक फंक्शन बनाते हैं जो हमारे द्वारा डाली गई GIF इमेज पथ को पुनः प्राप्त करेगा डेटा-alt विशेषता। हम प्रत्येक छवि के माध्यम से लूप करेंगे और jQuery का उपयोग करेंगे .डेटा() ऐसा करने की विधि:

 var getGif = function () var gif = []; $ ('img')। प्रत्येक (फंक्शन () var data = $ (यह) .data ('alt'); gif.push (data);); वापसी gif;  var gif = getGif ();

हम फ़ंक्शन चलाते हैं और आउटपुट को एक चर में सहेजते हैं gif, ऊपरोक्त अनुसार। gif चर अब पृष्ठ में छवियों से GIF का पथ समाहित करता है.

छवि पूर्व लोड हो रहा है

अब हमारे पास एक लोडिंग समस्या है: GIF अभी तक लोड नहीं होने के बावजूद, एक मौका है कि एनिमेटेड जीआईएफ तुरंत नहीं खेलेंगे (चूंकि ब्राउज़र को जीआईएफ को पूरी तरह से लोड करने के लिए कुछ सेकंड की आवश्यकता होगी)। जब GIF छवि का आकार बड़ा होता है तो यह देरी अधिक महत्वपूर्ण रूप से महसूस होगी.

पेज लोड होते ही हमें GIF को एक साथ लोड करना या लोड करना होगा.

 // सभी GIF को प्रीलोड करें। var छवि = []; $ .each (gif, function (index) image [index] = new Image (); image [index] .src = gif [index];);

अब, DevTools खोलो फिर से सिर पर नेटवर्क (या साधन) टैब। आप देखेंगे कि GIF पहले से ही लोड हैं, भले ही वे में सेव हों डेटा-alt विशेषता। और निम्नलिखित सभी कोड आपको करने की आवश्यकता है.

कोड का अंतिम टुकड़ा वह है जहां हम प्रत्येक को बांधते हैं आकृति वह तत्व जो छवि को लपेटता है क्लिक घटना.

कोड छवि स्रोत के बीच स्वैप करेगा src वह विशेषता जहाँ स्थिर छवि परोसी जाती है और डेटा-alt वह विशेषता जहां हम शुरुआत में GIF छवि की सेवा करते हैं.

उपयोगकर्ता द्वारा दूसरी बार क्लिक किए जाने पर कोड स्थिर छवि पर भी वापस आ जाएगा, “रोक” एनीमेशन.

 $ ('आंकड़ा')। ('क्लिक', फ़ंक्शन () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split (')'; if '($ imgExt [1] === = 'gif') $ img.attr ('src', $ img.data ('alt'))। Attr ('data-alt', $ imgSrc); और $ img.attr ('src', $) imgAlt) .attr ('data-alt', $ img.data ('alt')););

और बस। आप शैलियों के साथ पृष्ठ को पॉलिश कर सकते हैं, उदाहरण के लिए, आप यह इंगित करने के लिए छवि को ओवरलेइंग करते हुए एक प्ले बटन जोड़ सकते हैं “खेलने योग्य” या एक एनिमेटेड GIF.

डेमो देखें और यहां स्रोत डाउनलोड करें.

• डेमो देखें
• स्रोत डाउनलोड करें