गिफ, जावास्क्रिप्ट और एकाधिक उदाहरण

Question

शायद एक मूर्ख सवाल है लेकिन यहां वैसे भी चला जाता है।

उदाहरण: मान लें कि मेरे पास एक गैर-लूपिंग एनिमेटेड जीआईएफ है और मेरे पास दो आईएमजी तत्व हैं।

<img src="" id="slot1" /> 
<img src="" id="slot2" /> 

तो मैं स्लॉट 1 के स्रोत को बदलने के लिए थोड़ा जावास्क्रिप्ट का उपयोग करता हूं।

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif"; 
} 

someButtonGotClicked=changE('slot1'); 

जो ठीक काम करता है। Gif शुरू समाप्त करने के लिए से खेलता है लेकिन अगर मैं तो एक ही gif को slot2 का स्रोत बदलने के लिए:

changE('slot2'); 

slot1 रीसेट करता है यह slot2 शुरू कर यह gif है के साथ सिंक करने के लिए वापस शुरू करने के लिए gif है।

अब मुझे पता है कि मैं gif की प्रतिलिपि बना सकता हूं और उपयोग करने के लिए 2 अलग-अलग फाइलें रख सकता हूं और मुझे स्प्राइट शीट्स के बारे में पता है, लेकिन मैं उत्सुक हूं यदि मैं एक gif की एक प्रति का उपयोग कर सकता हूं और इसे पृष्ठ पर कई बार उपयोग किया है gif के सभी उदाहरणों को हर बार पुन: प्रारंभ करने के बिना किसी अन्य आईएमजी तत्व को उसी फ़ाइल को प्राप्त किया जाता है क्योंकि यह स्रोत है?

आशा है कि भ्रमित नहीं हो रहा था। धन्यवाद।

Answer 1

एक बार जब छवि स्मृति में लोड हो जाती है, तो उसी यूआरएल का उपयोग करने वाली सभी अन्य ऑब्जेक्ट्स, ब्राउज़र कैश से छवि का संदर्भ प्राप्त करती हैं। यह एक ही छवि को कई बार लोड करने से बचाता है। एक gif के मामले में, मेटा डेटा का ट्रैक रखने के लिए वर्तमान फ्रेम है, जो <img> डोम तत्व पर संग्रहीत नहीं है, बल्कि संरचना में ब्राउज़र स्तर पर यह उस gif को स्टोर करने के लिए उपयोग करता है।

लोड पर, वह फ्रेम इंडेक्स रीसेट हो गया है। इसलिए, जब ब्राउज़र gif loop को संसाधित कर रहा है, तो दूसरी छवि लोडिंग वर्तमान फ्रेम इंडेक्स को शुरुआत में सेट करती है, इसलिए दोनों छवियां सिंक्रनाइज़ होती हैं।

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

संपादित करें: अपने कोड को ठीक करने के लिए आपको मूल रूप से अपनी छवि के अंत में कुछ यादृच्छिक जोड़ना होगा।

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif?" + Math.random(); 
} 

तो ब्राउज़र सोचता है कि यह एक अलग छवि है (यानी अलग यूआरएल)।

Answer 2

इसलिए की तरह एक समाधान का उपयोग कर प्रयास करें:

<img src="" id="slot1" class="animate" /> 
<img src="" id="slot2" class="animate" /> 


(function(doc, w) { 
    var changE, getElementsByClassName; 

    changE = function(img) { 
     img.src = "animated.gif"; 
    }; 
    getElementsByClassName = function(node, classname) { 
     if (node.getElementsByClassName) { // use native implementation if available 
      return node.getElementsByClassName(classname); 
     } else { 
      return (function getElementsByClass(searchClass, node) { 
       if (node == null) 
        node = doc; 
       var classElements = [], 
        els = node.getElementsByTagName("*"), 
        elsLen = els.length, 
        pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"), i, j; 

       for (i = 0, j = 0; i < elsLen; i++) { 
        if (pattern.test(els[i].className)) { 
         classElements[j] = els[i]; 
         j++; 
        } 
       } 
       return classElements; 
      })(classname, node); 
     } 
    }; 
    w.onload = function() { 
     var imgs, i = 0, l; 
     imgs = getElementsByClassName(doc, 'animate'); 
     l = imgs.length; 
     for (i; i < l; i++) { 
      imgs[i].onclick = function(e) { changE(this); }; 
     } 
    }; 
})(document, window); 

यह calss नाम animate और क्लिक करें घटना केवल विशिष्ट छवि को क्लिक करने पर प्रभाव पड़ेगा कि के साथ प्रत्येक छवि के लिए एक clicke घटना सेट हो जाएगा।