Gifs，Javascript和多個實例

也許一個愚蠢的問題，但這裏無論如何。Gifs，Javascript和多個實例

例如：假設我有一個非循環動畫GIF，並且我有兩個img元素。

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

所以我用一個小小的javascript來改變slot1的來源。

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

someButtonGotClicked=changE('slot1');

工作正常。 GIF，從開始到結束播放，但如果我那麼插槽2的src更改爲相同的GIF：

changE('slot2');

SLOT1重置它的GIF回到開始與插槽2開始它的GIF同步。

現在我知道我可以複製GIF並有2個獨立的文件使用，我知道精靈表，但我很好奇如果我可以使用GIF的一個副本，並讓它在頁面上多次使用沒有所有的gif實例正在重新啓動每次另一個img元素接收相同的文件，因爲它的src？

希望沒有讓人困惑。謝謝。

來源

2012-02-17 Nikki

你在哪個瀏覽器上觀察到這種行爲？ – maerics 2012-02-17 22:49:12

我想你也不想在添加新的gif之前簡單地刪除第一個gif？ – 2012-02-17 22:55:02

您是否嘗試通過'images'集合來訪問'img'-element？ '函數changE（x） {var image = document.images [x]; image.src =「動畫。gif「; }' – Teemu 2012-02-17 22:56:22

將圖像加載到內存後，所有其他使用相同URL請求該圖像的對象都會從瀏覽器緩存中獲取對該圖像的引用。這避免了多次加載相同的圖像。在gif的情況下，要跟蹤的元數據之一是當前幀，它不是存儲在dom元素的<img>處，而是存儲在用於存儲該gif的結構中的瀏覽器級別。

載入時，該幀索引被重置。所以，當瀏覽器正在處理gif循環時，第二個圖像加載會將當前幀索引設置爲開頭，因此兩個圖像都會同步。

這是一個瀏覽器實現，似乎大多數瀏覽器都遵循這個實現。這樣做的一個好處是，如果您在一個頁面中擁有數千個小GIF（來自同一個URL），那麼瀏覽器將執行更少的計算來渲染它們，因爲它只會更改一個幀索引而不是數千個。

編輯：要修復你的代碼，你必須在圖像的最後添加一些隨機的東西。

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

因此，瀏覽器認爲這是一個不同的圖像（即不同的網址）。

來源

2012-02-17 23:17:54 Candide

是否將查詢字符串附加到圖片url對此有影響？ – 2012-02-17 23:19:49

是的，這是一種解決方法，因爲它被認爲是不同的網址 – Candide 2012-02-17 23:23:33

這很聰明，它有什麼缺點？ – Nikki 2012-02-17 23:30:02

嘗試使用的解決方案，像這樣：

<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);

這會設置一個clicke事件與CALSS名animate和點擊事件隻影響特定圖片點擊每幅圖像。

來源

2012-02-17 23:16:50 Paul

當我有更多時間時，我肯定會嘗試理解您的解決方案：P – Nikki 2012-02-17 23:51:58

如果您有任何問題，請聯繫我，大部分代碼只是通過類名選擇圖片，如果您能夠，我建議查看jQuery，它會將以上所有代碼都變成：$（。動畫）.click（函數（e）{changE（this）;}）;'http://jquery.com/ – Paul 2012-02-17 23:56:27

Gifs，Javascript和多個實例

回答

相關問題