How can I force images to decode on load?

Question

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?

Answer 1

The issue could be related to the images being scrolled out of/into view.

From http://creativejs.com/resources/requestanimationframe/

It has also been hinted that browsers could choose to optimize performace of requestAnimationFrame based on load, element visibility (being scrolled out of view) and battery status.

Also from the W3C draft

ISSUE-4 Do we want to allow an Element to be passed to requestAnimationFrame, so that animations affecting the given element are throttled or paused when scrolled out of view?

Make sure that you're not starting a requestAnimationFrame loop for each onscroll event as that may cause problems. This is described in detail in this separate post

Questions about Request Animation Frame