0

0

怎样处理 Safari 移动端对图片资源进行限制

一个新手

一个新手

发布时间:2017-09-13 10:21:54

|

1839人浏览过

|

来源于php中文网

原创

原文作者: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 的切换效果 )。

怎样处理 Safari 移动端对图片资源进行限制怎样处理 Safari 移动端对图片资源进行限制

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

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

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

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

Article Forge
Article Forge

行业文案AI写作软件,可自动为特定主题或行业生成内容

下载
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 作为替换图片。

怎样处理 Safari 移动端对图片资源进行限制怎样处理 Safari 移动端对图片资源进行限制

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

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

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

88

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

90

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

61

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

493

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

16

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

12

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

5

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
黑马云课堂jQuery基础视频教程
黑马云课堂jQuery基础视频教程

共46课时 | 9.9万人学习

前端最全HTTP基础原理及应用
前端最全HTTP基础原理及应用

共12课时 | 1.7万人学习

独孤九贱(6)_jQuery视频教程
独孤九贱(6)_jQuery视频教程

共44课时 | 34.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号