<script type="text/javascript">
//
window.onload = function(){
var body = document.getElementsByTagName("body")[0];
// 1.创建Image对象
//第一种方式
var img = new Image('300','300');
//第二种方式
//var img = document.createElement('img');
//接受两个参数,设置宽、高
/*
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
图像对象:
建立图像对象:图像对象名称=new Image([宽度],[高度])
图像对象的属性: border complete height hspace lowsrc name src vspace width
图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。
* */
//hspace 设置或返回图像左侧和右侧的空白
img.hspace = "100";
//vspace 设置或返回图像的顶部和底部的空白
img.vspace = "100";
//当图像装载完毕时调用的事件句柄。
img.onload = function() {
console.log("当图片加载完时出现");
//打印图片的地址
console.log("src:"+img.src);
// 打印图片的高度
console.log("height:"+img.height);
// 是否加载完成 完成返回true
console.log("complete:"+img.complete);
// 打印图片的水平距离
console.log("hspace:"+img.hspace);
};
//在装载图像的过程中发生错误时调用的事件句柄。
img.onerror = function(){
alert("图片加载错误时,发生调用");
};
//如果图像的加载被中断,则会显示一个对话框:
img.onabort = function(){
alert("图片图像的加载被中断");
};
//新的图像元素不一定要从添加文档后才开始下载,只要设置了src属性就会开始下载
//由于我们这个事件目的是在图片加载完之后显示某些信息,而图片下载并不是把image对象添加到DOM中才开始下载,而是赋予src时就开始下载了,所以为避免网速过快,src已经加载完,事件还并没有被触发的这种极端情况,我们要将src放在事件之后添加
body.appendChild(img);
img.src = "http://www.005.tv/uploads/allimg/161009/1523215548-0.jpg";
/*注意
* ie 火狐等大众浏览器均支持 Image对象的onload事件。
ie8及以下、opera 不支持onerror事件
* */
};
</script>
[js点滴]JavaScript中Image对象操作实例
最新推荐文章于 2023-01-16 10:06:50 发布