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

[coraline]

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

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

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

使用说明看 Github 说明

欢迎各种问题

[mgcnrx11]

demo 不错，赞！

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

[takatost]

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

[takatost]

加上 lazyload 会更不错哦

[coraline]

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

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

[loading]

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

[coraline]

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

[mgcnrx11]

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

[takatost]

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

[loading]

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

[yyfearth]

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

[yyfearth]

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

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

[loading]

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

[paloalto]

支持 background-image 吗

[coraline]

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

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

[loading]

@coraline
@yyfearth

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

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

[coraline]

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

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

[zhaohai]

好像不错

[Fly1993]

效果不错，超赞

[DT27]

感谢楼主哇，正需要这个功能。
http://www.mobiletextwallpaper.com/
一会儿加上试试。

[DT27]

兼容性太差了= =、不折腾了。。。