一个精确显示图片加载进度，并且可以定义图片是否模糊显示插件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3586 天前的主题，其中的信息可能已经有所发展或是发生改变。

重新发一次，这次改进了插件，更新 demo 还有说明

地址： https://github.com/LoeiFy/CBFimage

预览地址： http://loeify.github.io/CBFimage/demo/

使用说明看 Github 说明

欢迎各种问题

第 1 条附言 · 2015-03-07 16:04:59 +08:00

全屏图片显示地址：

http://lorem.in/CBFimage/demo/full.html

因为图片比较小，网速好点的加载条会一闪而过，因为很快加载完

插件

GitHub

说明

21 条回复 • 2015-03-08 15:48:38 +08:00

mgcnrx11

2015-03-07 15:26:07 +08:00

demo 不错，赞！

加载进度的加载条可以再有改进

takatost

2015-03-07 15:28:32 +08:00

浏览器兼容性如何？图片不能跨域貌似是个问题。。
另外建议一下，Loading 效果能自定义就好了

takatost

2015-03-07 15:30:30 +08:00

加上 lazyload 会更不错哦

coraline

2015-03-07 15:51:21 +08:00

@mgcnrx11 修改插件加载返回接口，可以自定义你想要的进度条。demo 只是一个例子

@takatost 浏览器要求比较高，ie 要大于 9，由于是用 js 加载图片，所以会有跨域问题，没办法。这个是用 canvas 来显示图片的，不适合大量图片网站，所以 lazyload 也不怎么需要

loading

2015-03-07 15:52:49 +08:00

能先下一张 thumb 模糊（自备该图），然后下清晰的吗？

coraline

2015-03-07 16:02:26 +08:00

@loading 不可以，我不是很明白为什么要这样做

mgcnrx11

2015-03-07 17:03:16 +08:00

跨域应该可以用AccessOriginAllow的header解决

takatost

2015-03-07 17:13:00 +08:00

@mgcnrx11 Access-Control-Allow-Origin 是html5新增的一项标准功能，因此 IE10以下版本的浏览器是不支持的
而且一般图片跨域基本上都不是自己的服务器，而是外链图片

loading

2015-03-07 19:00:07 +08:00

@coraline 对于高分辨率图片来说(好几兆大小)，先快速下载一张50k左右的缩略图然后模糊，再加载，能显著提高用户体验。

yyfearth

2015-03-07 19:46:33 +08:00

base64Encode 可以直接用浏览器原生的 btoa 方法
而且既然已经有这么高的浏览器要求 btoa 肯定是支持的了
如果不需要精确的进度条完全没必要去用ajax加载图片

yyfearth

2015-03-07 19:51:04 +08:00

@loading LZ的做法的目的貌似不是为了你说的那种
他是把图片下载下来加载到canvas上面再blur
应该是存粹为了blur而已

而你说的是jpeg还是png格式支持的那种progressive的模式
图片随着加载逐渐变清晰
这个只需要在上传的时候对图片进行一下转换处理就可以做到
只不过必须用img或者background直接加载而不是ajax加载所以不可能有进度条
不过loading的效果是可以做出来的利用img.onload事件就可以了

loading

2015-03-07 19:55:01 +08:00

@yyfearth 嗯，那个我知道。我只是发现楼主这个 blur 效果实在是太好了。

paloalto

2015-03-07 21:04:38 +08:00 via iPhone

支持 background-image 吗

coraline

2015-03-07 21:20:38 +08:00

@loading 就像 @yyfearth 所说的那样，你可以等待 image onload 时候调用 canvas 来实现模糊，按你的意思也没必要使用 ajax 来加载图片了，这样也不会有跨域问题。当然这样就没办法精确知道加载进度之类，看取舍了。

@paloalto 这个可以的，但是现在还不行，可以加上。原理就是 ajax 完 image，直接设为 background 而不使用 canvas

loading

2015-03-07 21:28:03 +08:00 via Android

@coraline
@yyfearth

我做成img src=thumb 的模糊图片，点击再用楼主的库ajax加载原图吧。
应该可以了。

楼主，加载进度条背景能设置吗？我想用thumb图片当背景。

coraline

2015-03-07 21:45:43 +08:00

@loading 插件有加载回调，你可以在回调中做一些事情：
```js
CBFimage({
id: 'canvas', /*（必须）定义canvas作用id */
cache: 'true', /* (可选) 设定是否缓存，默认true，当为 false 时候每次都会重新加载图片 */

/* 以下接口函数只触发在首次图片的加载，或者是更新图片时候 */
start: function() {
// 图片开始加载
},
progress: function(loaded, total) {
// 图片加载过程，loaded 表示已经加载大小，total 表示总大小
},
end: function() {
// 图片加载结束
}
})
```
其中 progress 就是你想要的回调，在这里定义你想要的效果