读Zepto源码之assets模块
2019独角兽企业重金招聘Python工程师标准>>>
assets
模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景,所以这部分的代码解释不会太多,为了说明这个问题,我翻译了《How to work around the Mobile Safari image resource limit》这篇文章作为附文(《怎样处理 Safari 移动端对图片资源的限制》),更详细地解释了这个模块的应用场景。
读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto
源码版本
本文阅读的源码为 zepto1.2.0
GitBook
《reading-zepto》
源码分析
;(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模块
参考
- Zepto assets 模块的原理?
- How to work around the Mobile Safari image resource limit
License
署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
转载于:https://my.oschina.net/u/3483091/blog/1538891
读Zepto源码之assets模块相关推荐
- 读Zepto源码之Deferred模块
Deferred 模块也不是必备的模块,但是 ajax 模块中,要用到 promise 风格,必需引入 Deferred 模块.Deferred 也用到了上一篇文章<读Zepto源码之Callb ...
- 读Zepto源码之Ajax模块 1
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- zepto ajax php实例,读Zepto源码之Ajax模块
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...
- 读 zepto 源码之工具函数
对角另一面 读 zepto 源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目 ...
- 读zepto源码之工具函数
2019独角兽企业重金招聘Python工程师标准>>> Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.e ...
- 读Zepto源码之代码结构
虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧. 源码版本 本文阅读的源 ...
- Zepto源码分析-event模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- 试读angular源码第三章:初始化zone
直接看人话总结 前言 承接上一章 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 文章列表 试读angular源码第一章:开场与platformBro ...
- nginx源码分析之模块初始化
在nginx启动过程中,模块的初始化是整个启动过程中的重要部分,而且了解了模块初始化的过程对应后面具体分析各个模块会有事半功倍的效果.在我看来,分析源码来了解模块的初始化是最直接不过的了,所以下面主要 ...
最新文章
- 快速求斯特林数总结(洛谷模板题解)
- mysql format函数对数字类型转化的坑
- python长度分割文本_python 按照固定长度分割字符串的方法小结
- python画饼图-python matplotlib画饼图
- android中AVD的使用
- 主成分分析和因子分析十大不同点
- stm32 内部sram大小_在SRAM、FLASH中调试代码的配置方法(附详细步骤)
- java反射jdk1.8,Java基础----jdk1.8 反射实验
- 第二代飞信机器人“小达”问世了
- linux oops产生原理,kernel panic , Oops 等cpu异常的分析与定位
- 《pro Spring》学习笔记之Spring HTTP 远程方法调用
- nemesis什么车_TSC名车品牌将推全新Nemesis全球最强超跑
- 示坡线高程判断_一步一步教你识别地形图
- Rosalind第83题:Inferring Genotype from a Pedigree
- 我用飞桨做了一个菜品图像识别系统
- 使用vue-giant-tree根据id定位位置
- 重启计算机后ip丢失,win10系统重启后ip丢失的处理步骤
- 《UNIX环境高级编程》笔记 第十章-信号
- daimayuan每日一题#849 国家铁路
- mysql 处理emij表情_判断是否emij表情