如何强制图像在加载时解码？

Question

我正在构建一个使用requestAnimationFrame进行视差滚动的网站。有多个部分，每个部分都有一个全尺寸的背景图像以及一些中间和前景图像。我已经通过requestAnimationFrame设法让这个动画相对平滑，但动画中仍然偶尔出现抖动。

通过在帧模式下观看Chrome的时间线，我可以看到导致“jank”的进程被标记为“Image Decode”。此外，一旦动画完成一次，jank就不会重现。

似乎大多数浏览器现在都推迟了尚未查看的图像的解码。有没有一种方法可以预先解码（不仅仅是预加载）图像，而不会让用户看到它们？

Answer 1

问题可能与图像滚出/进入视图有关。

来自http://creativejs.com/resources/requestanimationframe/

  

还有人暗示浏览器可以选择进行优化   requestAnimationFrame的性能基于负载，元素可见性   （滚出视图）和电池状态。

同样来自W3C draft

  

ISSUE-4我们是否要允许传递元素   requestAnimationFrame，使动画影响给定元素   当滚出视图时会被限制或暂停？

确保您没有为每个onscroll事件启动requestAnimationFrame循环，因为这可能会导致问题。这在单独的帖子

中有详细描述

Questions about Request Animation Frame

Answer 2

我通过消除检查元素是否在屏幕上的行来解决这个问题，这可能与浏览器做同样的事情，只是很差。