2012-10-12 18 views
5

我有一個頁面上有7個gif文件。有沒有同步gif文件的方法?

有沒有辦法同步他們所有的,所以他們開始在同一時間?

我正在考慮將它們預加載,但如果加載時間比另一個加載時間長,它們可能無法啓動同步。

+5

你無法控制用JavaScript(或任何JavaScript庫)啓動gif文件。你可以做的最好的做法是預加載它們,然後在全部加載的同時重新設置它們的src。這將使他們都重新啓動。 – Archer

+0

我認爲這將是阿切爾的答案。 「重置src」是什麼意思? – williamsongibson

+0

有兩種方法可以去。可以在頁面上放置圖像並讓它們全部加載,或者將頁面上的圖像隱藏並使用純粹在腳本中的圖像對象將它們加載到內存中。一旦它們全部加載完畢,只需爲頁面中的每個圖像設置src即可。通過重置src,我僅僅意味着將src屬性設置爲它已經是 - 「$(」img「)。each(function(){$(this)[0] .src = $(this)[0])。 src;});' – Archer

回答

10

正如@Archer在上面指出的,一種方法是預先加載它們,然後重置src。使用jQuery你可以做類似的事情:

$(window).load(function() { 
    $('.preload').attr('src', function(i,a){ 
     $(this).attr('src','').removeClass('preload').attr('src',a); 
    }); 
}); 

請參閱jsfiddle

-2

嘗試將它們全部預加載到頁面的頭部,並在身體加載時運行它們。製作一個功能,function gifs{}也許,並像這樣運行:<body onload="gifs()">

1

考慮用png序列(sprite表)甚至jpg序列替換你的gifs,這取決於內容的類型。

創建所需動畫大小的div,將sprite表設置爲隱藏溢出的背景圖像。

在javascript中創建一個計時器,它可以在每個時間間隔同時更新所有動畫(背景圖像位置),從而可以非常精確地控制幀速率。

我以前使用過這種技術,如果精靈表不會太多地影響加載時間,它就會工作得很好。