推薦一個 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

配置接口：

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 (directive)

vgSrc 指令用法與 ngSrc 指令類型。指令支持 angular 表達式，如.

<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