Delay Gif until in viewport

Question

I have a webpage that has three gif images on there, Id like users to be abel too see these images animate but they all animate when the page loads, Is there a easy way to stop this I found this plugin and wrote this to see if it work:

https://github.com/zuk/jquery.inview

$('#gif').on('inview', function(event, isInView) {
  if (isInView) {
    console.log("element #gif became visible in the browser's viewport");
  } else {
    console.log("element #gif became invisible in the browser's viewport");
  }
});

Im not sure what I would use to make the images animate when the user can see them. Any help to get this working would be appreciated!! Thanks Tom

See the question I marked as duplicate for an answer. The events mentioned are different, but the logic involved is identical. — Rory McCrossan, Feb 29 '16 at 13:26
@RoryMcCrossan What events should I use, I can understand the logic, Im just unsure of what events to use — Tom Withers, Feb 29 '16 at 13:29
The mouseover in the linked question would be equivalent to the first clause in your `if` statement (ie. `isInView` is true), and mouseout would be the second clause. — Rory McCrossan, Feb 29 '16 at 13:30
I don't want it to be on mouseover, I want the animation to happen when the image is in view of the user, Ie when they scroll past it — Tom Withers, Feb 29 '16 at 13:31
Im saying Im unsure of what event to use... Thats why I posted the question — Tom Withers, Feb 29 '16 at 13:33
You don't need to use an event, you already have the plugin setup and working. You just need to use the `if` statement correctly. Have you looked at the question I linked? — Rory McCrossan, Feb 29 '16 at 13:34
what so use: $(this).attr('src', src.replace('.gif', '_anim.gif')); as my condition inside my if statement? — Tom Withers, Feb 29 '16 at 13:36
That's right. You just need to create the non-animated versions of the gif first — Rory McCrossan, Feb 29 '16 at 13:37

Delay Gif until in viewport

0 Answers0