专栏首页对角另一面读Zepto源码之assets模块

读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

作者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 读Zepto源码之Stack模块

    Stack 模块为 Zepto 添加了 addSelf 和 end 方法。 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading...

    对角另一面
  • 读Zepto源码之Gesture模块

    Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件。 读 Zepto 源码系列文章已经放到...

    对角另一面
  • 读Zepto源码之Data模块

    Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据。 读 Zepto 源码系列文章已经放到了git...

    对角另一面
  • CCAI 2017 | 德国DFKI科技总监Hans Uszkoreit:如何用机器学习和知识图谱来实现商业智能化?

    文/CSDN大琦 7 月22 - 23 日,由中国人工智能学会、阿里巴巴集团 & 蚂蚁金服主办,CSDN、中国科学院自动化研究所承办的第三届中国人工智能大会(C...

    AI科技大本营
  • 如何用机器学习和知识图谱来实现商业智能化?

    7 月22-23日中国人工智能大会(CCAI 2017)在杭州国际会议中心盛大开幕。德国人工智能研究中心(DFKI)科技总监、北京人工智能技术中心(AITC)总...

    CSDN技术头条
  • ECO都有哪些应用

    ECO(Engineering Change Orders)相当于ISE下的FPGA Editor,但比FPGA Editor更灵活,功能更强大,也更友好。总体...

    Lauren的FPGA
  • iOS界面设计,12个优秀案例激发你的灵感

    总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design。作为设计师,尤...

    奔跑的小鹿
  • requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?

         在五一节之前和一网友讨论前端技术时,对方提到vue、vue-route如果配合requirejs应用。当时的我没有想得很明白,也没能这位网友一个准确的...

    sam dragon
  • cssjshtml vue.js 组件嵌套demo

    葫芦
  • 【插件开发】—— 3 透视图开发

    Eclipse有很多的透视图,比如Debug,或者java。下面分别是Debug,和java的透视图,可以发现,他们的结构不一样,展示给使用者的画面也不相同。...

    用户1154259

扫码关注云+社区

领取腾讯云代金券