读Zepto源码之assets模块

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 设置为空,让垃圾回收器将图片元素回收,从而释放内存。

系列文章

  1. 读Zepto源码之代码结构
  2. 读 Zepto 源码之内部方法
  3. 读Zepto源码之工具函数
  4. 读Zepto源码之神奇的$
  5. 读Zepto源码之集合操作
  6. 读Zepto源码之集合元素查找
  7. 读Zepto源码之操作DOM
  8. 读Zepto源码之样式操作
  9. 读Zepto源码之属性操作
  10. 读Zepto源码之Event模块
  11. 读Zepto源码之IE模块
  12. 读Zepto源码之Callbacks模块
  13. 读Zepto源码之Deferred模块
  14. 读Zepto源码之Ajax模块

参考

License

读Zepto源码之assets模块

最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见: 读Zepto源码之assets模块

作者:对角另一面

上一篇:jquery 整理笔记(一)


下一篇:UVA11584-Partitioning by Palindromes(动态规划基础)