读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
设置为空,让垃圾回收器将图片元素回收,从而释放内存。
系列文章
- 读Zepto源码之代码结构
- 读 Zepto 源码之内部方法
- 读Zepto源码之工具函数
- 读Zepto源码之神奇的$
- 读Zepto源码之集合操作
- 读Zepto源码之集合元素查找
- 读Zepto源码之操作DOM
- 读Zepto源码之样式操作
- 读Zepto源码之属性操作
- 读Zepto源码之Event模块
- 读Zepto源码之IE模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Ajax模块
参考
License
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
读Zepto源码之assets模块的更多相关文章
- 读Zepto源码之Selector模块
Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器. 在阅读本篇文章之前,最好先阅读<读Zept ...
- 读Zepto源码之Touch模块
大家都知道,因为历史原因,移动端上的点击事件会有 300ms 左右的延迟,Zepto 的 touch 模块解决的就是移动端点击延迟的问题,同时也提供了滑动的 swipe 事件. 读 Zepto 源码系 ...
- 读Zepto源码之Gesture模块
Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之IOS3模块
IOS3 模块是针对 IOS 的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim 和 reduce . 读 Zepto 源码系列文章已经放到了github上,欢迎star: readin ...
- 读Zepto源码之Fx模块
fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能,在 fx 模块中,只做了事件和样式浏览器前缀的补全,没有做太多的兼容.对于不支持 CSS3 过渡和动画的, Zepto ...
- 读Zepto源码之fx_methods模块
fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法.所以 fx_methods 模块依赖于 fx 模块,在引入 fx_methods ...
- 读Zepto源码之Stack模块
Stack 模块为 Zepto 添加了 addSelf 和 end 方法. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 ...
- 读Zepto源码之Form模块
Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之Data模块
Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading ...
随机推荐
- 2810:完美立方-poj
2810:完美立方 总时间限制: 1000ms 内存限制: 65536kB 描述 形如a3= b3 + c3 + d3的等式被称为完美立方等式.例如123= 63 + 83 + 103 .编写一个 ...
- Javascript CustomEvent
Javascript CustomEvent 原文链接 https://davidwalsh.name/customevent,看到一篇介绍自定义事件的文章 翻译一下,不足之处,还请指正. 自浏览器诞 ...
- WebApi接收复杂类型参数
当接收实体时,该实体类不能添加Serializable属性,否则传来的json数据无法映射成功?
- java+jsp+sql server实现网页版四则运算.
设计思路: 1需要的工具以及实现这个算法和代码的事先条件. (1)sql server里面建议一个叫t_result的表)(当然你起什么名字都可以),里面输入所需要的列名.id,firstnumber ...
- 一个PHP高性能、多并发、restful的工具库(基于multi_curl)
This is high performance curl wrapper written in pure PHP. It's compatible with PHP 5.4+ and HHVM. N ...
- webMagic解析淘宝cookie 提示Invalid cookie header
webMagic解析淘宝cookie 提示Invalid cookie header 在使用webMagic框架做爬虫爬取淘宝极又家页面时候一直提醒cookie设置不可用如下图 淘宝的验证特别严重,c ...
- Git命令汇总(基础篇)
自己用Git有一段时间了,随着项目越来越多,功能分支也随之增加,从简单的基础命令到随心所欲,需要自己不断地去尝试总结,下面来分享一下我的Git使用总结. 本章基础篇主要讲解一些Git代码提交流程和Gi ...
- gulp入门详细教程
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
- Ansible - 简介和应用自动化基础实践
installAnsible简介和应用自动化基础实践 一.引入: 1.1 如官方定义,Ansible is The simplest way to automate apps and IT infr ...
- svn服务器的搭建与使用一
转载出处 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: ht ...