iOS Web 应用程序中图像的内存消耗

Question

我有一个 iPad（杂志）Web 应用程序，它显示一组中等大小 (~500kb) 的图像。每个视图显示一个 (1024x768)，滑动时显示另一个。

我有三个图像（上一个、当前和下一个）作为 display:block 同时显示，而其他图像被 display:none 隐藏。

在某种程度上一切正常。但是，当应用程序运行一段时间并显示更大的图像集（20+）时，应用程序崩溃，主要是在 iPad 1 上。我的假设是这与设备的内存消耗有关。

我的问题是：保持内存消耗尽可能低的最佳做法是什么？显然将图像设置为 display:none 不起作用。我应该从 DOM 中删除图像，然后在进入视图时重新应用它们吗？还是有其他简单的技巧来防止应用程序崩溃？

Answer 1

有一种方法，您必须在删除 DOM 的元素之前将图像的源设置为空字符串：http://blog.thinkingtype.com/2012/07/ios-mobile-web-application-image-memory.html

因此，在您的情况下，当您将 display 设置为 none 时，您可以将源存储在 image 元素的 data 属性中，并在将 display 设置为 block 时使图像可见时再次设置源。