读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 条评论
登录 后参与评论

相关文章

来自专栏全栈

基于iView的列表组件封装

3532
来自专栏xingoo, 一个梦想做发明家的程序员

前端开发总览

记录前端学习历程 kissy UI JavaScript   1 funtion方法的高级特性   2 图解闭包   3 JS面向对象高级特性   4 ...

1786
来自专栏Golang语言社区

从web图片裁剪出发:了解H5中的Blob

刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像。当时两个方案摆在我面前,一个是flash,我不会。另一个是通过iframe上传图片,然后再上传坐标由后...

4347
来自专栏挖掘大数据

常用的Hadoop 文件查看工具

packages.config <?xml version="1.0" encoding="utf-8"?> <packages> <package id...

1859
来自专栏恰同学骚年

ASP.Net请求处理机制初步探索之旅 - Part 4 WebForm页面生命周期

开篇:上一篇我们了解了所谓的请求处理管道,在众多的事件中微软开放了19个重要的事件给我们,我们可以注入一些自定义的业务逻辑实现应用的个性化设计。本篇,我们来看看...

582
来自专栏小鄧子的技术博客专栏

【译】加载进阶

首先,从Android的资源文件中加载。你需要提供一个int类型的资源ID,而不是一个String类型的字符串指向网络URL。

833
来自专栏葡萄城控件技术团队

CoffeeScript和Sass提高Web开发效率

如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, function, {} ...

1987
来自专栏菩提树下的杨过

更好用的excel国际化多语言导出

不知道大家在开发中有没有遇到过『excel导出』的需求,反正我最近写了不少这种功能,刚开始利用poi,一行行的手动塞数据,生成excel,而且还有国际化需求,比...

542
来自专栏小特工作室

调用CodeSmith类库实现代码生成(含源码)

      CodeSmith的作用是不言而喻的,用过的人都会觉得它非常强大.根据自定义模板,快速生成代码.只是我们使用的时候,要在它提供的CodeSmith ...

1908
来自专栏Porschev[钟慰]的专栏

Asp.Net无刷新上传并裁剪头像

开发网站几乎都做过上传图片并截图,做个无刷新Asp.Net上传并截图示例 实现功能: 1.选择文件,自动上传并生成缩放图(上传带进度条),形成预览图 2.在预览...

2607

扫码关注云+社区