在看别人的程序，用到了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. Android-WebView加载网络图片&网页

    加载网络图片: 链接地址:  http://bcs.link-us.com.cn/directBank/newHX149/directBank/h5/www/dist/img/e113.jpg 确保链 ...

  2. UWP Button添加圆角阴影（一）

    原文:UWP Button添加圆角阴影(一) 众所周知,17763之前的UWP控件,大部分是没有圆角属性的:而阴影也只有17763中的ThemeShadow可以直接在xaml中使用,之前的版本只能用D ...

  3. Palindrome II

    Problem Statement Given a string s, partition s such that every substring of the partition is a pali ...

  4. OSLab多进程

    日期:2019/3/23 内容:Linux下与多进程相关的函数.     进程基本知识 定义 应用程序关于某数据集合上的一次运行活动. 特点 ·操作系统进行资源分配和调度的基本单位 ·进程是程序的一次 ...

  5. 大脸猫讲逆向之ARM汇编中PC寄存器详解

    i春秋作家:v4ever 近日,在研究一些开源native层hook方案的实现方式,并据此对ARM汇编层中容易出问题的一些地方做了整理,以便后来人能有从中有所收获并应用于现实问题中.当然,文中许多介绍 ...

  6. C#6.0语言规范(十) 类

    类是可以包含数据成员(常量和字段),函数成员(方法,属性,事件,索引器,运算符,实例构造函数,析构函数和静态构造函数)和嵌套类型的数据结构.类类型支持继承,这是一种派生类可以扩展和专门化基类的机制. ...

  7. UICollectionView设置首个cell默认选中

    设置UICollectionView中某个cell的默认选中,刚开始为追求性能,采用同一个cellId去标识UICollectionViewCell,却由于cell的重用会导致之前选中的cell在被重 ...

  8. spring IOC理解

    用spring做了几个项目后发现,对spring的IOC理解还是不够清晰,今天就来总结下自己的理解(个人的一些见解) 以前用jsp+servlet做网站时,只是分了显示层(jsp),控制层(servl ...

  9. widows下 python环境变量配置

    widows下 python环境变量配置 便于cmd命令行操作,例如:直接进入Python解释器环境.使用pip安装模块等.

  10. dubbo-常用配置

    一.启动时检查 官网说明: Dubbo 缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止 Spring 初始化完成,以便上线时,能及早发现问题,默认 check="true&q ...