I'm building a site that does parallax scrolling with requestAnimationFrame. There are multiple sections, each with a full-sized background image and some mid- and foreground images as well. I've managed to get this animating relatively smoothly via requestAnimationFrame, but there are still occasional jitters in the animation.
By watching Chrome's timeline in Frame mode, I can see that the processes that are causing the "jank" are labeled "Image Decode." Furthermore, the jank does not recur once the animation has been completed once.
It seems that most browsers are now deferring the decoding of images not yet in view. Is there a way I can pre-decode (not just preload) the images without them being visible to the user?
I solved this by eliminating the line that checks whether an element is onscreen or not, which was likely doing the same thing as the browser, only poorly.