-1

I added a gif image in my html page but it was in the last section when I load my page it work immediately I want a way to pause or stop it until the user scroll down and reach it to work

Taghreed
  • 11
  • 5
  • Would something like AOS (Animinate on Scroll) help you? https://michalsnik.github.io/aos/ –  Mar 27 '18 at 08:38
  • https://stackoverflow.com/questions/32771645/gif-image-not-animate-after-refreshing-the-page/32772171 - I found this searching, may be useful – dan6657 Mar 27 '18 at 08:39
  • You will need to use two images one is gif and other is still image...load the still image first and on scroll change it to gif... – Bhuwan Mar 27 '18 at 08:40
  • Possible duplicate of [Is it possible to pause a .gif image?](https://stackoverflow.com/questions/29661821/is-it-possible-to-pause-a-gif-image) – caramba Mar 27 '18 at 08:41
  • Have you considered using a small video instead? They're almost always smaller files and with those you have access to all of the HTML5 video controls. – DBS Mar 27 '18 at 08:52

1 Answers1

0

Assuming you're using an animated gif, I think something called 'lazy loading' may help you. Essentially, this doesn't load an image until it's in view.

Typically lazy load is used to make pages finish loading faster. But in your case it could prevent your animation playing before it's in view.

Lazy loading images is done with javascript and you could use for example this jQuery plugin: http://luis-almeida.github.io/unveil/

I hope this helps you.

Dvaeer
  • 146
  • 7