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

相关文章

来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

851
来自专栏实战docker

Intellij idea远程debug连接tomcat,实现单步调试

web项目部署到tomcat上之后,有时需要打断点单步调试,如果用的是Intellij idea,可以通过如下方法实现: 开启debug端口,启动tomcat ...

3018
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度 在 deepin 的系统设置里面,没有找到鼠标滚轮速度调节的选项。但是默认情况下,其滚轮的速度...

28310
来自专栏云计算教程系列

在CentOS上用Caddy安装WordPress

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

5004
来自专栏开发之途

用WordPress搭建个人网站(1)

3866
来自专栏卡少编程之旅

fiddler抓包工具(windows)

67315
来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

1074
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

5353
来自专栏Python爬虫实战

MySQL 从零开始:02 MySQL安装

1103
来自专栏pangguoming

eclipse无法解析导入 java.util

eclipse无法解析导入 java.util是因为jre配置错误。 1、点击需要导入jar的项目,右击项目属性(properties),进入到如下图界面: ?...

3645

扫码关注云+社区