在看别人的程序，用到了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 事件触发。

随机推荐

  1. SRM481

    250pt 题意:上帝知道一个“先有鸡还是先有蛋”的答案,上帝和N<=10^6个人说了答案,不过有x个人故意告诉了他们错误的答案,然后有一个人问了这N个人问题的答案,有M个人说先有鸡,N-M个人 ...

  2. zoj2607

    题意:如左图,给定A,B,C,D的面积分别为大于等于a,b,c,d,求最小的面积 思路:因为a,b肯定有一个是满的(不然还可压缩到更小),同理,ac,bd,cd都只有一个是满的,所以有可能是对角满的, ...

  3. shell 命令 -- 漂亮的资源查看命令 htop

    htop 相较top,htop更加直接和美观.

  4. logrotate 日志切割工具

    相关原理参见:https://www.cnblogs.com/sailrancho/p/4784763.html 一.相关目录: 程序:/usr/sbin/logrotate配置:/etc/logro ...

  5. Java-动态代理技术

    1.程序中的代理 为具有相同接口的目标类的各个方法,添加一些系统功能,如日志,异常处理,计算方法运行的 时间,事务管理等等,都可以交给另一个类去实现这些功能,该类称为代理类. 注意:为了让代理类共享目 ...

  6. 在windows右键菜单中加入自己的程序 [转载]

    原文链接: http://blog.csdn.net/marklr/article/details/4006356  在windows右键菜单中加入自己的程序 标签: windowsattribute ...

  7. python--求参赛两队所有可能的比赛组合情况

    朋友遇到一个面试题,让我帮忙实现,题目如下: 红队有A1,B1,C1三名队员,蓝队有A2,B2,C2三名队员,每轮比赛各队出一名队员参加,一名队员只能参加一次比赛,假设A1不会和B2打,B1不会和B2 ...

  8. C#中解析JSON数据，并获取到其中的值

    1.应需求创建一个Json字符串 string json = "[{'Name':'张三','age':'20','Data':{'ID':100,'heigh':'180','weight ...

  9. Webapi文件上传

    1/  multipart/form-data方式 using Abp.UI; using Abp.Web.Models; using System; using System.Collections ...

  10. PowerDesigner的Name和Code不同步设置

    1.“Tools”->"GeneralOptions"(最下方) 2.“Dialog”(左侧列表选第2个) 3.“Name to Code mirroring”的勾去掉