读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模块

参考

• Zepto assets 模块的原理？
• How to work around the Mobile Safari image resource limit

License

License: CC BY-NC-ND 4.0

最后，全部文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

做者：对角另外一面