【译】怎样处理 Safari 移动端对图片资源的限制

原文作者:Thijs van der Vossen

本文翻译自《How to work around the Mobile Safari image resource limit》,原文写于2010年10月25日。可能部分限制已经不再适用。

翻译本文的目的是作为《读Zepto源码之assets模块》的附文,读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto

正文开始:

受限于 IpadIphone 的可用内存,Safari 浏览器的移动端会比桌面端有着更严格的资源使用限制

其中之一是每个 HTML 页面的图片数据总量。当移动端的 Safari 浏览器加载了 810MB 的图片数据后,就会停止加载其他图片,甚至浏览器还会崩溃。

大多数网站都不会受到这条限制的影响,因为保持页面合理的大小通常是一种很聪明的做法。

但是,在下面的场景中,你可能会遇到麻烦,如大型的图片画廊和幻灯片,或者是异步加载新数据的 web 应用,例如模拟不同版块切换时的原生动画(是的,你可以用移动端 Safari 模拟 Flipboard 的切换效果 )。

我们有充足的理由相信,只通过删除不再需要的图片元素,就可以不受这条限制的影响:

var img = document.getElementById('previous');
img.parentNode.removeChild(img);

但是然并卵,因为某些原因,将图片从 DOM (或者一个包含图片的元素)中删除时,图片的真实数据并没有释放。真是头大啊!

而将图片的 src 属性设置为其他的(更小的)图片链接,却起到了作用。

var img = document.getElementById('previous');
img.src = 'images/empty.gif';

替换掉 src 属性后,旧的图片数据最终得到了释放。

我已经彻底测试过这种方法,下面几个方面是需要注意的:

  1. src 属性设置为其他图片后,图片数据不会立即释放,需要一段时间让垃圾回收器来真正地释放内存。这意味着,如果你太块地插入图片,依旧可能会陷入麻烦中。
  2. 在移动端 Safari 触发限制后,即便删除一部分或者全部已经加载的数据,Safari 也不会再加载额外的图片,这种情况即便在切换到其他页面时也继续存在。这意味着在测试这项技术时,你需要经常重启 Safari(这差点把我逼疯了)。
  3. 如果你想将图片元素从 DOM 中删除,你还必须确保在更改 src 前,元素不能为垃圾回收掉,否则,旧图片数据不会被释放。下面这个是最好的解决方案:
var img = document.getElementById('previous');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' + 
      'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
window.timeout(function() {
img = null;
}, 60000);

你可以看到,我使用了 data URI 作为替换图片。

(如果你只是删除图片元素, iPad 在加载8张图片后会停止继续加载,如果用 Zeptoassets 插件,会持续加载。)

在上周我和 Thomas Fuchs 解释了这项技术后,他立即将它加入了 Zepto 中。这个周末,我贡献了一个测试函数,你可以自己用它来测试下。

译者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3278
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3665
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2926
来自专栏落花落雨不落叶

canvas画简单电路图

84011
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2752
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

5908
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38510
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3662

扫码关注云+社区