html css Animacja Gif

Question

Mam .gif odtwarzającą animację raz. To nie działa w pętli i nie chcę, żeby się zapętlał.

Mam 2 obrazów, png ("1" i "1"), animowany gif

chcę, że za każdym razem, gdy wskaźnik myszy znajduje się nad obrazem png, gif sztuk.

Mój problem polega na tym, że kiedy ustawiam pozycję myszy nad obrazem png, gif zagra raz i się zatrzyma. Kiedy odsuwam mysz, a następnie przesuję ją z powrotem nad obrazem, nie jest ona już odtwarzana.

Moi kody CSS:

#icon{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent; 
} 
#icon:hover{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent; 
} 

#icon jest div

Answer 1

Domyślnie nie można kontrolować pętli lub animacji GIF. Przeglądarka po prostu odtwarza GIF w obecnej formie.

Domyślnie niemożliwe jest określenie, kiedy GIF powinien grać.

Dostępne są trzy rozwiązania:
1. Użytkownik zastąpił src pliku img wartością data:image, tak aby wstawić GIF. Za każdym razem, gdy src się zmieni, GIF zostanie odtworzony ponownie. Używając wbudowanego GIF zamiast prawdziwego adresu URL, nie ma ponownego pobrania GIF-a, co oszczędza czas. Zobacz: http://www.websiteoptimization.com/speed/tweak/inline-images/ na przykład
2. Podobnie jak w komentarzach i innych odpowiedziach, możesz zastąpić src tagu img tym samym GIF, ale z załącznikiem do adresu URL (np.? SomeRandomNumber = 1345), aby ponownie załaduj GIF i zagraj ponownie. Minusem jest to, że GIF zostanie ponownie załadowany.
3. Używasz czegoś podobnego do http://slbkbs.org/jsgif/, aby pobrać GIF przez AJAX, a następnie narysujesz go za pomocą elementu canvas i masz nad nim pełną kontrolę ...

Answer 2

Pętla jest właściwością samego GIF. Najlepszym sposobem na zrobienie tego byłoby zmodyfikowanie GIF-a, aby animacja mogła się bez końca pętać. Większość edytorów graficznych akceptujących animacje GIF ma opcję "Loop", która może być ustawiona na true.

W przeciwnym razie można to zrobić w sposób hacky za pomocą JavaScriptu, ponownie ładując obraz lub ponownie uruchamiając wskaźnik po pewnym czasie (patrz window.setInterval).

Answer 3

Musisz wziąć obraz z CSS dla tej pracy i używać img src=

ale można zmodyfikować to:

// hack for not caching .gifs in ff/chrome etc. 
$("img").each(function() { 
    var src = $(this).attr("src"); 
    if(/\.gif$/i.test(src)) { 
     $(this).attr("src", src.replace(/\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1)); 
    } 
}); 

Co to jest

• pętle ze wszystkich obrazów na stronie
• sprawdza, czy jest .gif zmienia
• rozszerzenie, aby dodać losową liczbę na pl.

Możesz zamienić go w funkcję i usunąć fragmenty, których nie potrzebujesz, tak aby za każdym razem, gdy wskazywałeś kursor nad png - ponownie zażąda on obrazu .gif, ponieważ miałby on inny numer dołączony do końca.