读Zepto源码之assets模块

àì夳堔傛蜴生んèń 2022-06-08 03:14 278阅读 0赞

assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景，所以这部分的代码解释不会太多，为了说明这个问题，我翻译了《How to work around the Mobile Safari image resource limit》这篇文章作为附文（《怎样处理 Safari 移动端对图片资源的限制》），更详细地解释了这个模块的应用场景。

读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

源码分析

  1. ;(function($){ 
  2.   var cache = [], timeout
  4.   $.fn.remove = function(){ 
  5.     return this.each(function(){ 
  6.       if(this.parentNode){
  7.         if(this.tagName === 'IMG'){
  8.           cache.push(this)
  9.           this.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
  10.           if (timeout) clearTimeout(timeout)
  11.           timeout = setTimeout(function(){  cache = [] }, 60000)
  12.         }
  13.         this.parentNode.removeChild(this)
  14.       }
  15.     })
  16.   }
  17. })(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模块

参考

  • Zepto assets 模块的原理？
  • How to work around the Mobile Safari image resource limit

License

License: CC BY-NC-ND 4.0

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见： 76626b0be42083d36b36f4a117dc1873

作者：对角另一面

发表评论

表情：
评论列表 （有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

    相关 读Zepto源码之Fx模块

    `fx` 模块为利用 `CSS3` 的过渡和动画的属性为 `Zepto` 提供了动画的功能，在 `fx` 模块中，只做了事件和样式浏览器前缀的补全，没有做太多的兼容。对于不支持

    电玩女神电玩女神/ 0 赞/ 473 阅读