• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animated gif plays once but can't be seen from begining again, why?

New Here ,
Jan 17, 2019 Jan 17, 2019

Copy link to clipboard

Copied

Hey folks. It is silly but I do not know why my animated gif inserted into page plays once (it was created to play once) but when call again through swap images or show / hide layers do not play from beginning. It shows just end. I need to refresh page. Manually through browser or "Refresh" head tag with automatic action delayed in seconds. Is there any way to make it through click / mouse over behavior?

Please help.

Janusz

Views

287

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 18, 2019 Jan 18, 2019

The reason it's not working for you is because your animated gif is very likely only being loaded to your page one time. Since it's only designed to play once after loading, you see the last frame on subsequent rollovers. I've gotten around this in the past by appending the animated .gif src with a ? and random number using javascript. This tricks the browser into reloading the image every time it's hovered (because the file name is different every time).

The below is for a <div> background...

CSS

...

Votes

Translate

Translate
Community Expert ,
Jan 18, 2019 Jan 18, 2019

Copy link to clipboard

Copied

Hi,

Can you post the code please

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 18, 2019 Jan 18, 2019

Copy link to clipboard

Copied

LATEST

The reason it's not working for you is because your animated gif is very likely only being loaded to your page one time. Since it's only designed to play once after loading, you see the last frame on subsequent rollovers. I've gotten around this in the past by appending the animated .gif src with a ? and random number using javascript. This tricks the browser into reloading the image every time it's hovered (because the file name is different every time).

The below is for a <div> background...

CSS:

#offState {

     background-image:url(off-state.jpg);

}

HTML:

<div id="offState" onmouseover="this.style.backgroundImage = 'url(animated.gif?' + Math.random() + ')';" onmouseout="this.style.backgroundImage = 'url(off-state.jpg)';">

</div>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines