在看别人的程序，用到了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. AutoCompleteTextView 简单用法

    http://blog.csdn.net/i_lovefish/article/details/17337999

  2. Excel函数vlookup

    最近整理业务文档,需要用到excel,按照教程,操作了20来分钟,却得不到结果. 看了视频,才知道,vlookup仅限关联选中区域的第一列关联,把要关联的行拷贝到第一列,解决. https://www ...

  3. UniGUI的TUniLoginForm窗口自定义背景色和背景图片

    雨田家园 UniGUI的TUniLoginForm窗口自定义背景色 uniGUI的TUniLoginForm类创建的登录窗口默认是不带颜色,可以自定义css风格来改变背景颜色. 一般是通过在UniSe ...

  4. Swagger ui测试中的验证 apikey

    Swagger ui测试中的验证 apikey 我们使用swagger 用来呈现webapi的接口,除了可以看到接口的说明和参数说明,还可以进行测试.但是我们的接口通常是有验证的,不是随便就能调用的, ...

  5. powerviot open error in sharepoint 2013

    Testing Service c2WTS +- Service c2WTS found +- Service c2WTS is running +- Path of service: C:\Prog ...

  6. mac终端常用命令

    1.du #查看文件目录大小 示例:查看DataCenter目录下所有文件/文件夹的大小 everSeeker:DataCenter pingping$ -h .9G ./Books 1.2M ./C ...

  7. git如何忽略已经加入版本控制的文件

    git移除已经追踪的文件 有时候新增一个文件,会自动追加到git的版本控制当中,但是又不想提交到仓库.可以按照下面的步骤: git status 查看管理状态: ml-py git:(master) ...

  8. 使用IEDA远程调试

    下面演示在docker中调试代码. 使用vulhub作为演示. 下载vulhub,进入vulhub/fastjson/vuln/ 编辑docker-compose.yml ,在最后新建一行加入  - ...

  9. 玄武短信接口和移动MAS短信接口的API封装

    直接上代码,关键点: 133行的敏感词过滤 176行的6位扩展码写入 using System; using System.Collections.Generic; using System.Linq ...

  10. JobScheduler调度器过程（JobSchedulerService的启动过程）

    JobSchedulerService启动过程,最主要工作是从jobs.xml文件收集所有的jobs,放入到JobStore的成员变量mJobSet,转成jobinfo. JobScheduler服务 ...