推薦一個 angular 圖像加載插件

推薦一個簡單的 Angular 圖片加載插件：vgSrc，插件根據圖片資源的不一樣加載狀態，顯示不一樣圖片，親測兼容IE-8。

使用

1. 推薦使用 bower 加載：

bower install vgSrc --save

並引入：

<script src="/bower_components/vgSrc/dist/vgSrc.min.js"></script>

1. 也可下載源碼，在頁面引入：

<script src="/libs/vgSrc/dist/vgSrc.min.js"></script>}

example

1. 簡單實例

<img vg-src="ctrl.currentImg" alt="">

1. 添加樣式

<img vg-src="ctrl.currentImg" loading-cls="loading" error-cls="error" empty-cls="empty" loaded-cls="load" alt="">

1. 監聽事件

<img vg-src="ctrl.currentImg" loading-cls="loading" error-cls="error" empty-cls="empty" loaded-cls="load" alt="">

更多實例，請查閱 sample/index.html 文件

API

vgSrcConfigProvider

配置接口：
javascript vgSrcConfigProvider.$set(config)

example:
javascript 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 (directive)

vgSrc 指令用法與 ngSrc 指令類型。指令支持 angular 表達式，如.
html <img vg-src="ctrl.currentImg" alt=""> <img vg-src="'/img/someImage.png'" alt="">

配置項

替換圖片

vgSrc 支持 loading、error、empty 狀態下的圖片替換：

1. vgSrc 指令求值結果爲空時(null、undefined、空字符串)，將顯示 empty 值指定的圖片
2. 開始加載時，將顯示 loading 值指定的圖片
3. 加載出錯時，將顯示 error 值指定的圖片
4. 加載成功後，正常顯示圖片

事件

vgSrc 支持 onBegin、onError、onLoad 事件，可經過 vgSrcConfigProvider 、 vgSrc 兩種方式註冊不一樣類型的事件處理器：

1. 經過 vgSrcConfigProvider 方式註冊的監聽器將作爲默認的事件監聽器，事件參數爲：$e{src:''}，用法如：

onBegin:function($e){
  console.log($e.src);
}

1. 經過 vgSrc 方式註冊的監聽器將覆蓋默認的事件監聽器，事件參數爲：$e{src:''}，用法如：

<img vg-src="ctrl.currentImg" on-begin="ctrl.log(src)" alt="">

樣式class

vgSrc 支持 loadingCls、loadedCls、errorCls、emptyCls 樣式，可經過 vgSrcConfigProvider 、 vgSrc 兩種方式註冊 class 值：

1. 經過 vgSrcConfigProvider 方式註冊的 class 將作爲默認的 class ，用法如：

errorCls:'errorClass'

1. 經過 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