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

    250pt: 题意:在二维平面上,给定3种,左转.右转,以及前进一步,的指令序列循环执行,问整个移动过程是否是发散的. 思路:直接模拟一个周期,然后判断1.方向是否和初始时不同 2.是否在原来的点 满 ...

  2. Visualise the Argyris basis functions

    """ Author: kinnala Visualise the Argyris basis functions. """ from sk ...

  3. AWS–Sysops notes

    Monitoring, Metrics and Analysis 1.CouldWatch Introduction2.EC2 Status Troubleshooting3.Create A Cou ...

  4. 取得cxgrid的表格的值，仔细看下面的代码

    procedure TfrmMain.cxGridDBTableView_List_PSSJCustomDrawCell(Sender: TcxCustomGridTableView; ACanvas ...

  5. Xcode一些好用的插件，以及这些插件的管理器

    最近从xcode6.4升级到xcode7,发现以前所有的插件都失效了,如果要安装,需要重新去一个个下载.安装,很麻烦. 于是,转来了这篇博文,亲自测试,发现很好用...... 地址:http://11 ...

  6. [NewCode 4] 替换空格

    题目描述 请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 最直接的方式, ...

  7. 量子力学与广义相对论的统一——用广义相对论解释海森堡测不准原理 Unification of Quantum Mechanics and General Relativity: Explaining Heisenberg Uncertainty Principle with General Relativity

    从海森堡测不准原理的实验开始: 从实验中可以看到,当有光源测定路线,且双孔打开的时候,接收板原波谷处变成了波峰. 对此,广义相对论的解释是:此时电子经过双孔后的轨迹发生了变化.双孔周围的空间弯曲度被光 ...

  8. 受邀与微软售前技术团队参与TFS技术沟通会议

    微软正式发布Azure DevOps Server 2019的第一个版本,作为Team Foundation Server (TFS)2018的升级版本和替代产品. 作为开发运维一体化平台的主打产品, ...

  9. Mac系统登录不进系统解决办法

    1.找到买苹果电脑时附带的 Mac OS X 系统光盘,或者有苹果 Mac OS X 系统镜像的 U 盘/移动硬盘,塞入光驱(或插在 USB /火线接口上).重启苹果电脑,开机时按住“option”键 ...

  10. JQuery - 阻止回车键

    JQuery 和 js 禁止enter回车事件方法 jQuery版 $(window).keydown( function(e) { var key = window.event?e.keyCode: ...