13

我有一个很长的图片库,我希望能够在移动设备上显示而不会导致浏览器崩溃或导致滚动不顺畅。周围有大量插件可以延迟加载图像,但是有什么可以在不在视图时卸载图像以节省内存吗?

4

3 回答 3

17

这是LinkedIn工程团队博客文章LinkedIn for iPad的引述:与此问题相关的HTML5中平滑无限滚动的5种技术:

UIWebView/Mobile Safari对图像有严格的限制。我们的流中充满了大图像,因此我们很快就达到了极限。一种选择是使用 HTML5 Canvas 元素绘制图像而不会遇到内存问题。然而,我们发现在画布上绘制非常大的图像很慢,因此我们不得不采取另一种方法:每当图像被充分滑出屏幕时,我们将 img 标签的“src”属性替换为非常小的图像。这确保了用于渲染大图像的内存被定期释放。此外,我们确保没有引入空图像 src 属性错误

于 2013-04-16T13:00:12.620 回答
1

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

于 2012-05-23T14:22:59.727 回答
0

这是一篇较旧的文章,但仍然有帮助: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属性值仍然不能保证浏览器会释放内存,但它是垃圾收集器的一个强有力的提示。无论如何,如果图像没有立即释放,那么如果用户决定滚动回它,它仍然在缓存中。

于 2013-09-26T12:32:55.577 回答