如何級聯啓動多個gif？

我有一個動畫火焰蠟燭的gif。我的網頁將連續顯示幾個gif。如果所有GIF在頁面加載後都不立即啓動（否則我會得到一行'同步'蠟燭），這將更加實際。如何級聯啓動多個gif？

我可以使用不同的火焰動畫創建多個GIF，然後隨機選擇顯示哪些GIF，但這會佔用額外的帶寬，並會增加額外的複雜度。

有沒有辦法可以級聯啓動GIF？即在隨機時間之後開始每一個，以便它們不同步並且看起來更現實一些？

也許使用jQuery？或簡單的JavaScript？

非常感謝

2014-07-03 John T

AFAIK你沒有從JavaScript的GIF的時間軸上的控制...所以我很確定這是不可能的。這就是說，除非你打算通過時間機器在90年代主持你的網站，否則我會說一個蠟燭的動畫gif無論如何都是一個非常糟糕的主意，所以無論他們是否一起開始，你的網站都會顯得很糟糕。只是說... –

爲什麼不動態地添加圖像，間隔？ – Ian

GIF在加載到DOM後將開始動畫。您可以使用'setTimeout'延遲此負載，並在此期間顯示GIF第一幀的靜態圖像。 – Sean

你不能那樣做。如果您在多個地方放置相同的圖像，它將始終看起來一樣。您可以編輯圖像並更改gif中幀的順序，保存並重復幾次，然後加載gif，但這隻有在圖像已在瀏覽器中加載（緩存）的情況下才有效。如果這是您第一次加載該頁面，則可能會發生這樣的情況，即當從加載的圖像的第一幀開始的另一圖像開始時，圖像將被精確加載，因此它看起來好像是同步的。

您可以使用setTimeout加載圖像，但是當用戶首次進入您的頁面時，這會遇到與上述相同的問題。您可以延遲加載文件的請求，但您無法控制文件的下載速度，因此無法控制第一幀何時開始播放。

如果我是你，我會嘗試創建一個不同圖像的大精靈，每個人都從不同的框架開始動畫。將只有一個請求，所有動畫將一起播放，確保幀不會同步。在網站上顯示圖像時，請務必正確顯示每幅圖像所需的部分。這會給你隨機燃燒的火焰效果。

來源

2014-07-03 14:17:01 Narxx

感謝Narxx - 你能否通過製作一個不同圖像的精靈來闡述你的意思？你的意思是一個很大的gif上有很多蠟燭，然後用CSS以某種方式選擇一個大的gif區域來顯示（爲了只顯示一個gif）？或者你在說別的什麼？謝謝。 –

我不是narxx的頭腦，但是你的確在這方面給出了一個精靈的定義。 –

是的，約翰。這正是我的意思。將所有不同的GIF放在一個大的GIF文件（精靈）中，然後你可以選擇使用CSS顯示圖像的哪一部分。這就像使用普通精靈而不是背景圖片一樣（因爲背景不支持動畫GIF）。您可以將圖像放置在其容器中，給容器一個「overflow：hidden」規則，隱藏其餘的大精靈圖像。 – Narxx

如何級聯啓動多個gif？

回答

相關問題