iPad对Canvas Tag的限制;网页崩溃的画布标签动画

时间:2011-05-03 22:09:02

标签: ios ipad html5 canvas

有人知道iPad对canvas标签有任何限制吗?

目前我正在制作一个使用翻书和音频标签组合来模拟内嵌视频内容的广告素材。动画被绘制到canvas元素并与正在播放的音频内容同步。当有人点击下面的四个按钮时,会播放4个短视频片段。

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/

我遇到的问题是在iPad上。玩了几个动画后,移动游猎突然崩溃了。当我在iPhone上播放时它永远不会发生,但每次都在iPad上发生。它不是一个特定的动画,因为如果我单击一个不同的按钮组合,它崩溃的前一个剪辑播放正常,然后它决定在另一个剪辑上崩溃。

我认为问题可能与Safari提供单独页面浏览量的内存量有关。我发现了一篇博文,很好地解释了这个问题。

http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/

根据该帖子,一旦移动Safari达到特定的内存阈值,图像就会开始返回空白。到目前为止,这与我的发现是一致的。我正在测试这一切的iPad正在运行iOS 3.2.1(之前有人告诉我,我应该向我的老板解释,没有人再使用3.X了,我试过......他们仍然要我调查这个)。我借了一个运行iOS 4.2.1的同事iPad,并且该设备没有崩溃,但有些图像没有被绘制到画布上。

我很确定它也是canvas标签的一个问题,因为我尝试运行动画而不向canvas元素绘制任何内容,并且页面永远不会崩溃。

这就是为什么我认为它可能是Safari对canvas标签支持的限制。当然,我愿意接受别人的建议。

1 个答案:

答案 0 :(得分:1)

感觉有点奇怪,再次回答我自己的问题,我觉得如果有人搜索过这类问题,答案会有所帮助。

我相信我原来的假设是正确的。 aniamtions使用的图像总量约为600+。我认为较旧的iPad尽可能多地加载,然后当它用完缓存并且画布标签试图绘制不再存在的图像时,它就崩溃了。

最终,我们最终将广告投放到iOS 4.2及更高版本的设备,因为这些新设备似乎没有出现问题。另外,我们进一步压缩了图像尺寸,这有助于减少我们存储在存储器中的图像数量。

如果有人知道iOS 4.2或更高版本浏览器中的缓存阈值大小,如果您评论,我会很感激。只是想知道我可以安全加载多少KB的图像数据。