推荐一个 angular 图像加载插件
推荐一个简单的 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 图像加载插件相关推荐
- angular 图片引入_推荐一个 angular 图像加载插件
推荐一个简单的 Angular 图片加载插件:vgSrc,插件根据图片资源的不同加载状态,显示不同图片,亲测兼容IE-8. 使用 推荐使用 bower 加载: bower install vgSrc ...
- vs插件html,VSCode插件推荐-html实时加载插件-live server
很多刚接触前端的小伙伴们在开发 html 页面的时候觉得调试很不方便.因为每一次进行html 代码的更改的时候,要先保存 html 代码,然后用浏览器打开这个代码.而一个 html 页面在开发的时候总 ...
- 好轮子收藏:一个支持几乎所有流行格式的图像加载库stb_image.h
是在opengl教程网站上看到的,挺好用. stb_image.h一个非常流行的单头文件图像加载库,它能够加载大部分流行的文件格式,并且能够很简单得整合到你的工程之中. 下载地址:stb/stb_im ...
- c++版本opencv(02-第一个OpenCV程序 03.图像加载与保存)
c++版本opencv(02-第一个OpenCV程序) 一.02-第一个OpenCV程序 二,03.图像加载与保存 来自网易云课堂 一.02-第一个OpenCV程序 如果加载到了之后呢,我们就要对它进 ...
- 加载插件时,提示反射异常,调用的目标出现异常,该模块应包含一个程序集清单
加载插件时,提示反射异常,调用的目标出现异常,该模块应包含一个程序集清单 参考文章: (1)加载插件时,提示反射异常,调用的目标出现异常,该模块应包含一个程序集清单 (2)https://www.cn ...
- 加载插件时,提示反射异常,调用的目标出现异常,该模块应包含一个程序集清单...
加载插件时,提示反射异常,调用的目标出现异常,该模块应包含一个程序集清单.排查一晚上终于找到原因是因为引用第三方类库的版本不对,错误引用的版本需要另外的类库,但是开发的时候引用的类库版本是不需要的,导 ...
- OpenCV 图像加载和显示
OpenCV 图像加载和显示 OpenCV 图像加载和显示 加载图像(使用cv :: imread) 创建一个名为OpenCV的窗口(使用cv :: namedWindow) 在OpenCV窗口中显示 ...
- 要求jQuery在执行某些操作之前等待所有图像加载的官方方式
在jQuery中,当您执行以下操作时: $(function() {alert("DOM is loaded, but images not necessarily all loaded&q ...
- Android动态加载插件APK
问题起因 我曾经在开发Android Application的过程中遇到过那个有名的65k方法数的问题.如果你开发的应用程序变得非常庞大,你八成会遇到这个问题. 这个问题实际上体现为两个方面: 一.6 ...
最新文章
- Java9发布回顾Java 8的十大新特性
- pwm 正弦波_CC6420单相正弦波直流无刷马达驱动应用指南
- java-commons-HttpClient超时设置setConnectionTimeout和setSoTimeout
- rmse多少算效果好_关键词SEO优化带来流量有多少?如何做SEO优化效果好?
- MUI侧滑导航:页面组件(本地插件化)
- python matplotlib画图遇到的问题——画多个子图
- c语言学习-从键盘输入10个字符,按照字典顺序将其排序输出(二维字符数组)
- k8s学习: Ingress Nginx
- Flask第十八篇 Flask-Migrate
- android 动态创建数据库表,简析Android数据库中创建表与LitePal的基本用法
- spring纯注解+libreoffice
- steam一键授权工具_Sam Haynor的100个STEAM项目
- html颜色转换rgba,16进制颜色怎么转换为rgba,怎么获取16进制颜色值rgba的值
- 【Altium Designer2018设计简单的PCB文件实例】
- 动态规划之详细分析0-1背包问题
- 8250u运行matlab,第8代CPU i5-8250U 电脑安装核显 WIN7X64位驱动 - 小众知识
- 浅谈CPRI原理及测试解决方案(转)
- 创业维艰:为啥大多数创业者都不开心?
- 编写可读代码的艺术读书整理
- Markdown pad2 使用本地图片
热门文章
- 【工业控制】UV打印机喷头波形和墨水关系
- 【Tools】XMind8安装教程详解
- 【Android】Android模拟器无法上网问题
- python如何绘制两点间连线_如何利用Python的pyecharts绘制3d柱形图?
- 上行短信 写入mysql_7、上行短信处理服务 -功能详细设计 --短信平台
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
- java中垃圾收集_Java中的垃圾收集器是什么?
- WriteFile写UNICODE字符串 TxT显示乱码
- 第二章 PX4-RCS启动文件解析
- C++直接初始化与复制初始化的区别深入解析