Is there a way to only have a .gif play if it is in the screen view using JQuery or Javascript? There are so many .gif files on my page and it is causing lag (and no I cannot just remove them)
Asked
Active
Viewed 3,557 times
1
-
1You can check on scroll if that section of the web page has come into view, and when it does, load the image source. – Daniel Williams Mar 09 '15 at 02:41
-
This may be of interest: https://github.com/buzzfeed/libgif-js – dsgriffin Mar 09 '15 at 02:42
-
For those who didn't understood what he asked, 9gag is example :) – Gereltod Mar 09 '15 at 03:00
1 Answers
4
You could use a plugin like https://github.com/darthrubens/gifplayer coupled with https://github.com/customd/jquery-visible
Place a static image for each gif on your website, as each element becomes visible in the viewport swap the static image for the gif and play that. As it leaves the viewport stop the gif playing and replace it with the static image again.
Burrito
- 517
- 3
- 8