读Zepto源码之assets模块
2017-09-11 07:33
323 查看
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
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
相关文章推荐
- 读Zepto源码之assets模块
- 读Zepto源码之assets模块
- Zepto源码之assets模块
- 一个普通的 Zepto 源码分析(三) - event 模块
- Zepto源码之callback模块
- 一步一步DIY zepto库,研究zepto源码1--基础模块
- 读Zepto源码之Gesture模块
- 读Zepto源码之Event模块
- 读Zepto源码之Form模块
- Zepto事件模块源码分析
- 读Zepto源码之Stack模块
- 读Zepto源码之Event模块
- 读Zepto源码之Form模块
- Zepto源码之touch模块
- 读Zepto源码之Stack模块
- 一步一步DIY zepto库,研究zepto源码6 -- deferred模块
- 读Zepto源码之Data模块
- 一个普通的 Zepto 源码分析(一) - ie 与 form 模块
- 一个普通的 Zepto 源码分析(二) - ajax 模块
- 读Zepto源码之Callbacks模块