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

使用

推薦使用 bower 加載：

bower install vgSrc --save 并引入： <script src="/bower_components/vgSrc/dist/vgSrc.min.js"></script>

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

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

example

簡單實例

<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 文件

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 狀態下的圖片替換：

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="">

樣式class

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',// 圖片加載中的樣式 classloadingCls: '',// 圖片加載完成的樣式 classloadedCls: '',// 圖片加載失敗的替換顯示圖片error: '/error.jpg',// 圖片加載失敗的樣式 classerrorCls: '',// 圖片值為空時的替換顯示圖片empty: '',// 圖片值為空時的樣式 classemptyCls: '',// 資源開始加載事件'onBegin': ng.noop,// 資源加載出錯事件'onError': ng.noop,// 資源加載完畢事件'onLoad': ng.noop}

兼容性

目前兼容主流瀏覽器及ie8

轉載于:https://www.cnblogs.com/vans/p/4875096.html

總結

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

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