new image的使用
在看别人的程序,用到了new image()这种方法,然而怎么看也不是很明白;
于是就上网搜,然而却没有一个人能够解开我心中的疑惑,因为没有一个人的程序是完整的,
即使我知道怎么用,但是我看不到效果就是白搭......
图像对象:
建立图像对象:图像对象名称=new Image([宽度],[高度])
图像对象的属性: border complete height hspace lowsrc name src vspace width
图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload
完整代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="one"></div>
<div></div>
<script>
var img=new Image();
img.src="http://1.huanssky.applinzi.com/ablum/img/17.png";//如果不能用的话,改成自己的位置
img.onload=function(){alert("img is loaded")};
img.onerror=function(){alert("error!")};
img.border="3px solid #ccc";
function show(){alert("body is loaded");console.log(img.width+" "+img.height)};
window.onload=show;
document.getElementById("one").appendChild(img);
</script>
</body> </html>
效果图如下:
关于边框的那行代码有点问题,显示的是黑色。
另外如果你想控制img的大小,可以这样创建var img=new Image(400,300);
生成img之后,不要忘了将其添加到某个标签之下,开始我就是没有添加,代码可以运行,但是就是看不到图片。
另外,从程序运行来看,先是图片加载成功,再是window.onload 事件触发。
随机推荐
- SRM473
250pt: 题意:在二维平面上,给定3种,左转.右转,以及前进一步,的指令序列循环执行,问整个移动过程是否是发散的. 思路:直接模拟一个周期,然后判断1.方向是否和初始时不同 2.是否在原来的点 满 ...
- Visualise the Argyris basis functions
""" Author: kinnala Visualise the Argyris basis functions. """ from sk ...
- AWS–Sysops notes
Monitoring, Metrics and Analysis 1.CouldWatch Introduction2.EC2 Status Troubleshooting3.Create A Cou ...
- 取得cxgrid的表格的值,仔细看下面的代码
procedure TfrmMain.cxGridDBTableView_List_PSSJCustomDrawCell(Sender: TcxCustomGridTableView; ACanvas ...
- Xcode一些好用的插件,以及这些插件的管理器
最近从xcode6.4升级到xcode7,发现以前所有的插件都失效了,如果要安装,需要重新去一个个下载.安装,很麻烦. 于是,转来了这篇博文,亲自测试,发现很好用...... 地址:http://11 ...
- [NewCode 4] 替换空格
题目描述 请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 最直接的方式, ...
- 量子力学与广义相对论的统一——用广义相对论解释海森堡测不准原理 Unification of Quantum Mechanics and General Relativity: Explaining Heisenberg Uncertainty Principle with General Relativity
从海森堡测不准原理的实验开始: 从实验中可以看到,当有光源测定路线,且双孔打开的时候,接收板原波谷处变成了波峰. 对此,广义相对论的解释是:此时电子经过双孔后的轨迹发生了变化.双孔周围的空间弯曲度被光 ...
- 受邀与微软售前技术团队参与TFS技术沟通会议
微软正式发布Azure DevOps Server 2019的第一个版本,作为Team Foundation Server (TFS)2018的升级版本和替代产品. 作为开发运维一体化平台的主打产品, ...
- Mac系统登录不进系统解决办法
1.找到买苹果电脑时附带的 Mac OS X 系统光盘,或者有苹果 Mac OS X 系统镜像的 U 盘/移动硬盘,塞入光驱(或插在 USB /火线接口上).重启苹果电脑,开机时按住“option”键 ...
- JQuery - 阻止回车键
JQuery 和 js 禁止enter回车事件方法 jQuery版 $(window).keydown( function(e) { var key = window.event?e.keyCode: ...