我正在使用 Skrollr.js 为图像序列设置动画。我从http://moto.oakley.com站点如何处理图像序列中获得灵感，并构建了一些脚本来帮助我自动将一系列图像写入 DOM。然后，我使用 Skrollr在关键滚动位置更改display:none;为。display:block我的脚本在调度完整事件之前预加载所有图像，然后我初始化 Skrollr 并允许交互。
所以，基本上我有一个<div>包含一堆这些的容器：
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
现在，这在 Chrome 和 FireFox 中运行良好（自然），但 Internet Explorer 11 在第一次滚动页面时似乎在渲染图像时出现问题。换句话说，当我第一次加载页面并滚动时，图像会像没有预加载一样闪烁到位，但随后的滚动动画非常好。就像 IE11 没有将图像渲染到内存中一样，所以在第一次显示任何图像时，屏幕的绘制速度会有延迟。
我不认为 Skrollr 是问题所在。也许我应该使用一些神奇的 CSS 设置。
有没有人有任何制作图像序列的技巧，所以即使在 Internet Explorer 中，它们每次看起来都非常流畅？！？
谢谢！