logo

iMAG移动应用开发指南

Image

图片控件,用来显示网络图片。

标签

标签名 描述 说明
img 图片标签 img标签用来显示动态的网络图片

属性

属性名 取值 描述
id String id编码
style String
img样式,包括:
src URL 图片链接地址
progress Boolen true:显示进度条
false:不显示进度条,默认值
显示一个图片加载进度条,一般用于图片较大,加载较慢的情况
default String 文件名,网络图片加载完之前显示一个已有的资源图片
badge String 图片右上角的提示信息
effect String 给图片加上效果:effect="round"用来显示圆形图片
onclick Javascript 点击时触发的脚本
onload Javascript 加载完成时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

注意:显示本地图片使用Icon图标控件。显示多张图片使用SlideImage图组控件,或者是$page.gallery()画廊方法。

注意:Image控件默认会使用缓存,相同文件名的图片只会获取一次,如果要对同一图片文件多次更新显示,需要动态设置图片src并在文件名后加上随机数,如:$('test_image').src = 'http://a0.att.hudong.com/24/61/01300000237086129196615710452.jpg?rand=' + Math.random()

● 显示网络图片

<img src="http://www.baidu.com/img/baidu_jgylogo3.gif"/>

● 设置图片大小

<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" style="width:100;height:50"/>

效果:

说明:Image默认会显示成图片本来的大小,也可以通过width和height样式来设置Image的大小,但这样会导致图片缩放变形。

● 透明图片

<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" style="alpha:0.3"/>

效果:

说明:给图片加上alpha透明值

● GIF动画图片

<img src="http://www.imagapp.com/docs/images/icon/icon_gif.gif"/>

效果:

说明:image可以播放gif动画

● 带提示图片

<img src="http://tp2.sinaimg.cn/1806582381/180/5632495275/1" badge="25"/>

效果:

说明:图标的右上角带提示信息

● 圆形图片效果

<img src="http://tp2.sinaimg.cn/1806582381/180/5632495275/1" effect="round"/>

效果:

说明:让原本方形的图片显示成圆形(支持png和jpg,对gif图片无效)

● 带加载进度条的图片

<img src="http://a0.att.hudong.com/24/61/01300000237086129196615710452.jpg" progress="true"/>

● 带默认图片的图片

<img style="align:center" default="portrait.png" src="http://tp2.sinaimg.cn/1806582381/180/5632495275/1"/>

● 修改图片地址

$('test_image').src = 'http://a0.att.hudong.com/24/61/01300000237086129196615710452.jpg';

● 修改图片大小

$('test_image').css('width:100;height:100');

● 隐藏图片

$('test_image').css('display', 'none');
$('test_image').css('display', 'hidden');

● 显示图片

$('test_image').css('display', 'block');

● 动态创建图片

var image = $C('<img id="test_image" src="http://www.baidu.com/img/bdlogo.gif"/>');
$('test_row').add(image);

● 动态创建图片

var image = $C('<img id="test_image" src="http://www.baidu.com/img/bdlogo.gif"/>');
$('test_row').add(image);

● 点击图片

<img src="http://a0.att.hudong.com/24/61/01300000237086129196615710452.jpg" onclick="hint("点击测试")/>

示例下载

请点此下载image相关的示例代码:imag-image.zip