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

    nodeclub笔记:https://cnodejs.org/topic/535601a20d7d0faf140303d8 先看一下框架,把没有接触过的部分熟悉一下. 熟悉一下package.json ...

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

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

  3. Winform下的Combox根据值来选中项

    其实很简单,因为Combox的Item是一个K/V的object,那么就可以把它的items转换成IEnumerable<DictionaryEntry>类型的(System.Collec ...

  4. 防止sql注入的小函数 以及一些小验证

    function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialch ...

  5. 【spring cloud】服务启动后正常，但是无法上线，一直处于down状态

    spring cloud eureka 如果出现某个应用实例 down(1), 说明 spring admin 健康检测没有通过导致 eureka 注册中心不会把这个实例从列表中删除掉. 这样所有使用 ...

  6. Python staticmethod classmethod 普通方法 类变量 实例变量 cls self 概念与区别

    类变量 1.需要在一个类的各个对象间交互,即需要一个数据对象为整个类而非某个对象服务. 2.同时又力求不破坏类的封装性,即要求此成员隐藏在类的内部,对外不可见. 3.有独立的存储区,属于整个类.   ...

  7. [原创]K8一句话密码爆破工具{秒破10万} 支持ASP/PHP/ASPX/JSP/CFM/DIY

    工具: K8_FuckOneShell 20161224编译: VS2012  C# (.NET Framework v4.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http ...

  8. POJ 2405

    #include <iostream> #include <cmath> #include <iomanip> #define pi 3.1415926536 us ...

  9. zookeeper 备忘

    cd /bin $ ./zkCli.sh ls /a 查看 ls /a true 查看并watch create –e /a 临时节点 create –s /a 顺序节点 create –e –s / ...

  10. Oracle VM VirtualBox启动后莫名奇妙的报错

    VirtualBox软件无法启动: 参考解决:http://blog.csdn.net/a_ssimi/article/details/52002939 修改兼容性:http://blog.csdn. ...