如何在“不在视野中”卸载图像以节省内存？

Question

我有一个looong图片库，我希望能够在移动设备上显示，而不会导致浏览器崩溃或引起不稳定的滚动。加载延迟加载图像的插件，但是为了节省内存，还有什么可以卸载图像吗？

Answer 1

这是LinkedIn工程团队博客文章LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5中与此问题相关的引用：

  

UIWebView / Mobile Safari有strict limits for images。我们的流中充满了大图像，所以我们很快就达到了极限。一种选择是使用HTML5 Canvas元素绘制图像without running into memory issues。然而，我们发现在画布上绘制非常大的图像很慢，所以我们不得不采取另一种方法：每当图像在屏幕上被充分滑动时，我们用非常小的图像替换img标签的“src”属性。这确保了用于渲染大图像的存储器被周期性地释放。此外，我们确保我们没有介绍empty image src attribute bug。

Answer 2

我认为没有办法做到这一点。 JavaScript只保存对DOM对象的引用，而DOM对象又由浏览器管理。因此，完全取决于浏览器缓存引擎来确定资源何时被释放。这些决策不是基于是否存在对此对象的JavaScript引用，而是基于加载资源的页面是否仍处于活动状态。 在任何情况下，浏览器都会自动执行缓存管理，您无法通过JavaScript对其进行影响，因为这意味着与用户的文件系统进行一种交互，在JavaScript中，由于安全考虑，只允许在极少数情况下使用明确的授权

Answer 3

这是一篇较旧的文章，但仍然有用：http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

要附加事件处理程序，以便在进入和离开视口的图像元素上进行通知，以便将其src属性替换为实际的img url（在视口中）或占位符URL（在视口外），插件：

http://static.pixeltango.com/jQuery/Bullseye/ http://imakewebthings.com/jquery-waypoints/

替换src属性值仍不能保证浏览器会释放内存，但这是对垃圾收集器的强烈暗示。无论如何，如果图像没有立即释放，那么如果用户决定滚动回来，它仍然在缓存中。