在看别人的程序，用到了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. Python自动化开发 - Django基础

    本节内容 一.什么是web框架 二.MVC和MTV视图 三.Django基本命令 四.路由配置系统 五.编写视图 六.Template 七.ORM 一.什么是web框架 对于所有的web应用,本质上其 ...

  2. 微擎开启redis memcache

    微擎开启redis memcache 2018年01月20日 14:39:54 luogan129 阅读数:2161更多 个人分类: 微信开发   版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  3. hdu 1226 超级密码

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem D ...

  4. CVPR2013总结

    前不久CVPR的结果出来了,首先恭喜我一个已经毕业工作的师弟中了一篇文章.完整的文章列表已经在CVPR的主页上公布了(链接),今天把其中一些感兴趣的整理一下,虽然论文下载的链接大部分还都没出来,不过可 ...

  5. C# 简单反射实现winform左侧树形导航，右侧切换内容

    先看看效果: 核心代码: using System; using System.Collections.Generic; using System.ComponentModel; using Syst ...

  6. [学习笔记]Link-Cut Tree

    我终于理解了 \(LCT\)!!!想不到小蒟蒻有一天理解了!!! 1.[模板]Link Cut Tree 存个板子 #include <bits/stdc++.h> using names ...

  7. IOS渗透测试第一步-基础知识统一放送

    原文: http://www.websecgeeks.com/2017/04/ios-application-pentesting-part-3.html http://www.websecgeeks ...

  8. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  9. typescript-koa-postgresql 实现一个简单的rest风格服务器 —— typescript 开发环境配置

    最近需要用 nodeJS 写一个后台程序,为了能够获得 IDE 的更多代码提示,决定用 typescript 来编写,随便也学习下 ts,在这记录下实现过程. 1.新建文件夹 typescript-k ...

  10. Docker三剑客之常用命令

    一.docker-machine 命令 说明 docker-machine create 创建一个 Docker 主机(常用-d virtualbox) docker-machine ls 查看所有的 ...