2010-07-07 16 views
19

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

मेरा वर्तमान कोड यहां है। img और nextimg<div> टैग हैं जिनमें प्रत्येक एक <img> है। nextimg_img प्रदर्शित होने वाली अगली छवि के अनुरूप <img> टैग है।

var tmp = nextimg_img.attr('src'); 
nextimg_img.attr('src', ''); 
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0); 
img.fadeOut('slow'); 
nextimg.fadeIn('slow'); 

विचार तो यह सेट वापस GIF के स्रोत को प्रदर्शित करने के लिए, कि यह '' के बगल में छवि के src विशेषता सेट करता है।

यह — काम करता है यह — से एनीमेशन को पुनरारंभ करता है लेकिन जीआईएफ को प्रदर्शित होने पर हर बार फिर से लोड किया जाता है।

संपादित करें: यह एक लूपिंग स्लाइड शो है, और जब मैं दूसरे/तीसरे/बाद के समय को दिखाता हूं तो मैं नेट से जीआईएफ को फिर से लोड करने से बचने की कोशिश कर रहा हूं।

उत्तर

25

आपको अपनी छवियों को कोड में प्रीलोड करना चाहिए।

nextimg_img.attr('src', image.src); 

फिर जब आप src बाहर स्वैप सिर्फ प्रीलोडेड छवि वस्तुओं से स्वैप:

var image = new Image(); 
image.src = "path"; 

आप उपयोग करना चाहते हैं। इसे पुनः लोड करने से बचने के लिए चाल चलनी चाहिए।

+0

क्या शुरुआत से जीआईएफ एनीमेशन शुरू होगा? – nornagon

+0

मुझे नहीं लगता कि यह क्यों नहीं होगा। जैसा कि मैंने कल्पना की है कि एनीमेशन वास्तव में स्क्रीन पर प्रदर्शित होने तक शुरू नहीं होता है। लेकिन मैंने ईमानदारी से पहले कोशिश नहीं की है इसलिए मैं 100% निश्चितता के साथ नहीं कह सकता। – spinon

+1

आह, आप सही हैं - मुझे एक विवरण याद आ रहा है। यह एक लूपिंग स्लाइड शो है। तो जब जीआईएफ दोबारा वापस आते हैं, तो वे अपने एनीमेशन के माध्यम से आधे रास्ते तक आते हैं जब तक कि मैं उन्हें पुनः लोड नहीं करता। – nornagon

2
// reset a gif in javascript 
img.src = "your_image_url.gif"+"?a="+Math.random(); 

ताडा!

कृपया ध्यान दें कि जीआईएफ हर बार डाउनलोड किया जाएगा, इसलिए इसे एक छोटी फ़ाइल रखें।

-2

मैंने इसे हल किया। इस कोड (या किसी अन्य स्थिर छवि यदि आप चाहें) पृष्ठ पर जगह पहले:

<img src="data:image/gif;base64,"> 

तो निम्नलिखित कोड से बदल जब आप इसे खेलने के लिए तैयार हैं:

<img src="data:image/gif;base64,R0lGODl...AH0AvI"> 

यह से खेलेंगे gif की शुरुआत।

एकमात्र समस्या यह है कि आप gif के यूआरएल का उपयोग नहीं कर सकते हैं, बल्कि केवल इसकी बेस 64।

संबंधित मुद्दे