在 MobileSafari 上使用 Javascript 管理大量图像

Question

我正在寻找在 iPad 版 Mobile Safari 中管理大量图像的方法。在这种情况下，我有一个网络应用程序，它将使用 webkit CSS3 动画来移动图像（据说是利用硬件来做到这一点）。

我注意到，如果我有超过 10 个大图像（每个 200-300K），我会遇到很大的性能问题。动画很跳跃等等。

我在某些tests 中读到过，Safari 将停止接受图像并显示“?”图标。一种解决方法是使用drawImage() 将图像绘制到CANVAS 元素。

除了追求基于CANVAS 的解决方法之外，是否有人有策略来根据需要加载/卸载图像（比如说 30 到 100 张 300K 的图像）？ （我猜没有，但值得一问）

Answer 1

GPU 的纹理内存数量有限。渲染图像使用此资源。一旦用完，操作系统会花费大量时间卸载/重新加载纹理内存。

获得更好性能的最佳方法可能是不要一次显示那么多大图像，尤其是当大多数图像不在用户可见的网页部分时。也许保存并用网页上的纯色矩形（或低分辨率缩略图）替换这些图像，直到它们滚动到视图中。