读Zepto源码之assets模块
来源:互联网 发布:淘宝装修设计是怎样的 编辑:程序博客网 时间:2024/06/05 14:04
assets
模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景,所以这部分的代码解释不会太多,为了说明这个问题,我翻译了《How to work around the Mobile Safari image resource limit》这篇文章作为附文(《怎样处理 Safari 移动端对图片资源的限制》),更详细地解释了这个模块的应用场景。
读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto
源码版本
本文阅读的源码为 zepto1.2.0
源码分析
;(function($){ var cache = [], timeout $.fn.remove = function(){ return this.each(function(){ if(this.parentNode){ if(this.tagName === 'IMG'){ cache.push(this) this.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' if (timeout) clearTimeout(timeout) timeout = setTimeout(function(){ cache = [] }, 60000) } this.parentNode.removeChild(this) } }) }})(Zepto)
如果看了附文,这段代码就很容易理解了,如果标签为图片,则用另外一张较小的图片替换,并且将图片元素存入 cache
中,再调用 removeChild
将图片元素从页面中删除,要注意,此时图片元素只是从页面中删除了,并没有被垃圾回收,在 6s
后,将 cache
设置为空,让垃圾回收器将图片元素回收,从而释放内存。
系列文章
- 读Zepto源码之代码结构
- 读 Zepto 源码之内部方法
- 读Zepto源码之工具函数
- 读Zepto源码之神奇的$
- 读Zepto源码之集合操作
- 读Zepto源码之集合元素查找
- 读Zepto源码之操作DOM
- 读Zepto源码之样式操作
- 读Zepto源码之属性操作
- 读Zepto源码之Event模块
- 读Zepto源码之IE模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Ajax模块
参考
- Zepto assets 模块的原理?
- How to work around the Mobile Safari image resource limit
License
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
阅读全文
0 0
- 读Zepto源码之assets模块
- 读Zepto源码之Event模块
- 读Zepto源码之Event模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Event模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Selector模块
- 读Zepto源码之Touch模块
- 读Zepto源码之Gesture模块
- 读Zepto源码之IOS3模块
- 读Zepto源码之IOS3模块
- 读Zepto源码之Fx模块
- 读Zepto源码之fx_methods模块
- 读Zepto源码之Stack模块
- 2017.9.13 序列统计 思考记录
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
- 深圳地产中介口碑调查折射出行业性问题
- 461. Hamming Distance
- 数据库总结
- 读Zepto源码之assets模块
- Object中的方法及应用,会有许多不完整的阐述,还希望各位多多点评。谢谢!
- 欢迎使用CSDN-markdown编辑器
- 1029.旧键盘(Hash散列)
- json注解概要
- hdu 2586 LCA在线算法
- iOS 一一 数据存储
- Nginx
- mybatis-PageHelper分页插件的原理和使用