首页 ›存档› 技术 › 查看内容

适用于 vue.js 和原生 js 的渐进式图片加载

2018-3-30 13:00 |来自: 互联网 561 0

摘要: 作者：ccforward 原文：github.com/ccforward/cc/issues/64 （点击文末阅读原文即可前往）知乎和 Medium 都用了 progressive image （渐进式图片加载），用低分辨率的模糊图片来做预览图，代替以前懒加载图片时 ...

作者：ccforward

原文：github.com/ccforward/cc/issues/64

（点击文末阅读原文即可前往）

知乎和 Medium 都用了 progressive image （渐进式图片加载），用低分辨率的模糊图片来做预览图，代替以前懒加载图片时用的 logo 占位图。预览图大小也在平均 2KB~3KB 之间，虽然 cdn 流量上有所增加，但用户体验却非常好。

知乎和 Medium 使用的是动态绘制 canvas 这种比较复杂的方式来展现模糊效果，所以来实现一个只需要 HTML、CSS、JS 就能实现的渐进式图片加载。

代码已经封装

GitHub 地址：https://github.com/ccforward/progressive-image

NPM 地址：https://www.npmjs.com/package/progressive-image

先看简单例子 demo：https://ccforward.github.io/progressive-image/example/index.html

HTML

基本的 HTML 结构如下

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：JS100分 | 玛尔玛产区大使精心打造的满分“托斯卡纳拉菲”下一篇：使用新的 Material Design 工具拓展调色板

适用于 vue.js 和原生 js 的渐进式图片加载

相关分类