一个简单的 Angular 图片加载插件，插件根据图片资源的不同加载状态，显示不同图片。
- 推荐使用 bower 加载：
bower install vgSrc --save并引入：
<script src="/bower_components/vgSrc/dist/vgSrc.min.js"></script>- 也可下载源码，在页面引入：
<script src="/libs/vgSrc/dist/vgSrc.min.js"></script>}- 简单实例
<img vg-src="ctrl.currentImg" alt="">- 添加样式
<img vg-src="ctrl.currentImg" loading-cls="loading" error-cls="error" empty-cls="empty" loaded-cls="load" alt="">- 监听事件
<img vg-src="ctrl.currentImg" loading-cls="loading" error-cls="error" empty-cls="empty" loaded-cls="load" alt="">更多实例，请查阅 sample/index.html 文件
配置接口：
vgSrcConfigProvider.$set(config)example:
ng.module('vgSrc.sample', ['vgSrc']).config([
'vgSrcConfigProvider',
function(vgSrcConfigProvider) {
vgSrcConfigProvider.$set({
debug: false,
error: 'http://ico.ooopic.com/iconset01/status-icons/gif/99589.gif',
onBegin: function($e) {
// console.log('start load:' + $e.src);
},
onError: function($e) {
// console.log('failure load:' + $e.src);
},
onLoad: function($e) {
// console.log('complete load:' + $e.src);
}
});
}
]);vgSrc 指令用法与 ngSrc 指令类型。指令支持 angular 表达式，如.
<img vg-src="ctrl.currentImg" alt="">
<img vg-src="'/img/someImage.png'" alt="">vgSrc 支持 loading、error、empty 状态下的图片替换：
- vgSrc 指令求值结果为空时(null、undefined、空字符串)，将显示 empty 值指定的图片
- 开始加载时，将显示 loading 值指定的图片
- 加载出错时，将显示 error 值指定的图片
- 加载成功后，正常显示图片
vgSrc 支持 onBegin、onError、onLoad 事件，可通过 vgSrcConfigProvider 、 vgSrc 两种方式注册不同类型的事件处理器：
- 通过 vgSrcConfigProvider 方式注册的监听器将做为默认的事件监听器，事件参数为：
$e{src:''}，用法如：
onBegin:function($e){
console.log($e.src);
}- 通过 vgSrc 方式注册的监听器将覆盖默认的事件监听器，事件参数为：
$e{src:''}，用法如：
<img vg-src="ctrl.currentImg" on-begin="ctrl.log(src)" alt="">vgSrc 支持 loadingCls、loadedCls、errorCls、emptyCls 样式，可通过 vgSrcConfigProvider 、 vgSrc 两种方式注册 class 值：
- 通过 vgSrcConfigProvider 方式注册的 class 将做为默认的 class ，用法如：
errorCls:'errorClass'- 通过 vgSrc 方式注册的 class 将做为此image特定的 class，用法如：
<img vg-src="ctrl.currentImg" error-cls="errorClass" alt="">** 注意，class 属性不支持angular表达式 —— 你只能传递简单的字符串 **
{
// 启动调试模式
debug: false,
// 图片加载中的替换显示图片
loading: '/loading.jpg',
// 图片加载中的样式 class
loadingCls: '',
// 图片加载完成的样式 class
loadedCls: '',
// 图片加载失败的替换显示图片
error: '/error.jpg',
// 图片加载失败的样式 class
errorCls: '',
// 图片值为空时的替换显示图片
empty: '',
// 图片值为空时的样式 class
emptyCls: '',
// 资源开始加载事件
'onBegin': ng.noop,
// 资源加载出错事件
'onError': ng.noop,
// 资源加载完毕事件
'onLoad': ng.noop
}目前兼容主流浏览器及ie8