在看别人的程序，用到了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. 修改apche的端口号为80后，重启不成功，怎么办

    修改为80后提示如下 Job for httpd.service failed. See 'systemctl status httpd.service' and 'journalctl -xn' f ...

  2. Delphi cxGrid使用汇总（一）

    1. 去掉cxGrid中台头的Box解决:在tableview1的ptionsview的groupbybox=false; 2．统计功能解决:(1) tableview1. tableview1的op ...

  3. 第21件事 资源支持离不开RACI表

    十步法的第九步寻求资源支持.资源主要包括人力资源.物力资源和财力资源.人力资源,即需要多少人:物力资源,即需要多少软硬件设备:财力资源,即需要多少预算.根据产品或项目目标,资源估算时要考虑需要什么样的 ...

  4. SWFUpload 在ie9上出现的bug

    SWFUpload 在ie9下会出现js错误 参考以下几个网址,备忘: http://code.google.com/p/swfupload/issues/detail?id=348 http://c ...

  5. Git清空历史，清空历史删除的文件，降低.git 文件大小

    执行以下步骤之前 请做好源码备份 本操作用来清理github上面的历史删除文件,减少库的体积. 第一步骤 下载JDK环境和JAR包 https://rtyley.github.io/bfg-repo- ...

  6. ovs flow 命令集

    流表可以有多个执行动作,是从左向右以此执行,常用动作如下: output:port: 输出数据包到指定的端口.port 是指端口的 OpenFlow 端口编号 group:group_id 输出数据包 ...

  7. AJPFX讲解外汇保证金交易的货币符号和外汇的报价方式

    AJPFX:外汇保证金交易的货币符号 认识货币名字是必须的入门基础,通过货币符号,首先要知道买卖哪个货币,下面是一些货币的符号.买卖外汇就是这些任意其中某两种货币的比值,也就是汇率.根据汇率比的升高或 ...

  8. linux02

    Linux Day 21.命令命令格式: chagrp chgrp命令用于变更文件或目录的所属群组. cd change directory 切换目录 格式:cd 路径 ls list 显示当前目录信 ...

  9. 关于WordCount的作业

    一.开发者:201631062418 二.代码地址:https://gitee.com/YsuLIyan/WordCount 三.作业地址:https://edu.cnblogs.com/campus ...

  10. day02 基本数据类型与运算符

    day02 1.基本数据类型 2.算术运算符 +,-,*,/,%,++,-- 3.赋值运算符 =,+=,-=,*=,/=,%= 4.关系运算符 +=,-=,*=,/=,%=  结果是boolean类型 ...