您好,欢迎来到花图问答。
搜索
您的当前位置:首页写不会 抄会吗?-VUE-图片异步加载组件

写不会 抄会吗?-VUE-图片异步加载组件

来源:花图问答
创造总是在无数的临摹之后
Paste_Image.png

挖代码

我是小兰 身为柯南的贴身小秘


Paste_Image.png

挖代码还是有点心得……


Paste_Image.png

了解技术选型

知己知彼 百战不殆
Paste_Image.png
按照大家起名字的尿性 一般这种组件都叫什么,,
(都不太好用……其中一个用了本来就算慢也都能出 用了之后10张图只出了2张……)

关键字

久久不能忘怀的是你脸上的痣

顺着一些线索比如img src loader 这类关键字还是很容易找到代码出处的,结果是 加粗 async-image 加粗

Paste_Image.png Paste_Image.png Paste_Image.png

咋用

会发现这个组件只有脚本部分 没有真实的模版部分 也只能借助渲染之后的dom结构来分析了
因为这个组件本身非业务组件 也不像幻灯组件复杂 所以很好找 哪怕不找猜也能猜到了……


Paste_Image.png

注意:
你会发现有一句依赖代码


Paste_Image.png

这个工具包作用貌似是如果图片很小的话就转为base64
当然我自己用的时候去掉了Y(_)Y

代码清单

console.log("看来你是真懒=_=")

效果


目前就在资讯栏目中加了 本地测试 组件要优化下 比如失败时候 给个叉

Paste_Image.png

Copyright © 2019- huatuowenda.com 版权所有 湘ICP备2023022495号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务