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

Question

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

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

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

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

Answer 1

您可能想查看此博文：iPad + HTML5 + Javascript Memory Management。

Answer 2

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

获得更好性能的最佳方法可能是不要一次显示那么多大图像，特别是如果大多数图像不在用户可见的网页上。也许保存并用网页上的普通彩色矩形（或低缩略图）替换这些图像，直到它们滚动到视图中。