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

Question

我正在寻找在 iPad 版 Mobile Safari 中管理大量图像的方法。在这种情况下，我有一个 Web 应用程序，它将使用 webkit CSS3 动画移动图像(据推测是利用硬件来这样做)。

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

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

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

Answer 1

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

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