在看别人的程序，用到了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. php apache

    php与Apache配置基础知识 1.在 AllowOverride 设置为 None 时,.htaccess 文件将被完全忽略.当此指令设置为All时,所有具有“.htaccess” 作用域的指令都 ...

  2. 关于分页插件PageHelper

    上课的时候学习了分页插件,感受到了它的强大,这里总结如下: 1.首先在spring配置文件中引入依赖jar包: <dependency> <groupId>com.github ...

  3. vdscode连接git服务器(以码云为例)

    准备工作:先下载并安装git客户端 1.在码云或者github上新建项目,获得新建项目的地址,得到一个类似:https://gitee.com/zhangshitongsky/vueTest.git ...

  4. day09_雷神_模块二

    day09 序列化之json 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊 ...

  5. 用JavaScript写的动态表格

    实现的功能有Table表格添加,删除.输入,删除的全选,单行删除. HTML代码部分 <body> <form> <table border="1" ...

  6. Android-WebView与本地HTML (Java调用--->HTML的方法)

    上一篇博客 Android-WebView与本地HTML (HTML调用-->Java的方法) 介绍了 JavaScript 调用--> Java中的方法,而此篇博客是介绍 Java 调用 ...

  7. [leetcode 12] Inter to Roman

    1 题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range fr ...

  8. A*与IDA*

    谨以此文向人工智能先驱,\(A\)*算法发明者\(Nils\ Nilsson\)致敬 推一篇深入研究的博客,而本文更多是粗略理解和习题吧. \(A\)*算法是什么?它是启发式搜索的一种,即广度搜索算法 ...

  9. Python 常用的内置函数

    1. str.isdigit( ) 作用:检测字符串是否有数字组成 2. strip( ) 作用:除去首尾指定的字符,包括空格,换行符,不能除去中间的字符 3. slice( ) 作用:以指定参数切割 ...

  10. 网易免费企业邮箱Foxmail设置方法

    网易免费企业邮箱Foxmail7.0设置方法 第一步:启动 Foxmail 邮件客户端,点击工具->账号管理,弹出如下页面. 点击新建,如下: 填写自己企业邮箱账号,然后下一步,邮箱类型选择PO ...