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

【问题标题】：How can I force images to decode on load?如何强制图像在加载时解码？
【发布时间】：2012-11-09 14:49:05
【问题描述】：

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

通过在帧模式下观看 Chrome 的时间线，我可以看到导致“卡顿”的进程被标记为“图像解码”。此外，一旦动画完成一次，卡顿就不会再次发生。

似乎大多数浏览器现在都推迟了对尚未显示的图像的解码。有没有一种方法可以在用户不可见的情况下预解码（不仅仅是预加载）图像？

【问题讨论】：

这些抖动是否可能是因为元素的大小尚不清楚？您有示例链接吗？
我明白了...当我滚动时，滚动会在图像解码时暂停片刻。这就是你说的问题，是吗？您是否尝试在顶部的 div 中显示所有图像？它们不必是可见的...设置 z-index 甚至显示 1x1 div，如有必要。
仅供参考-即使经过一次（Win＆，Firefox 16），我也会遇到动画问题。
我已经尝试显示所有图像，甚至是可见的，但它似乎并没有影响性能——我仍然在检查器中看到“图像解码”和卡顿动画。
你试过canvas元素了吗？

【解决方案1】：

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

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

同样来自W3C draft

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

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

【讨论】：

【解决方案2】：

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

【讨论】：