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

使用

推薦使用 bower 加載：

bower install vgSrc --save

并引入：

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

}

example

簡單實例

添加樣式

監聽事件

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 表達式，如.

配置項

替換圖片

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:''}，用法如：

樣式class

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

通過 vgSrcConfigProvider 方式注冊的 class 將做為默認的 class ，用法如：

errorCls:'errorClass'

通過 vgSrc 方式注冊的 class 將做為此image特定的 class，用法如：

** 注意，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

總結

以上是生活随笔為你收集整理的angular 图片引入_推荐一个 angular 图像加载插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。