在做一些tips效果，或者是一些图片浏览效果时，图片开始是隐藏的，当用户进行一定的操作时，图片会根据需要显示出来。但图片文件都相对比较大，如果一下子都显示出来，很耗时间和流量，如果都不显示，等触发一定事件时再加载，用户体验又不太好，增加用户的等待时间。

权衡一下利弊，可以有选择的利用JavaScript预加载一些需要的图片，先将其装入DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。JavaScript里的Image对象可以很好的实现这一需求，在FF下通过alert(img对象)可以看到“object HTMLImageElement“内容，Image对象可以直接利用append添加到body里面去，调用十分方便。

1.图像对象

网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[0]，document.images[1]...

2.建立图像对象格式

图像对象名称=new Image([宽度],[高度])

3.图像对象的属性

border complete height hspace lowsrc name src vspace width

4.图像对象的事件

onabort onerror onkeydown onkeypress onkeyup onload

5.需要注意

src属性一定要写到onload的后面，否则程序在IE中会出错。

6.实例一

var img=new Image();
  img.onload=function(){alert("img is loaded")};
  img.onerror=function(){alert("error!")};
  img.src="http://i2.cdn.turner.com/cnn/video/tech/2009/02/07/levs.ship.treasure.cnn.88x49.jpg";
  function show(){alert("body is loaded");};
  window.onload=show;

运行上面的代码后，在不同的浏览器中进行测试，发现IE和FF是有区别的，在FF中，img对象的加载包含在body的加载过程中，既是img加载完之后，body才算是加载完毕，触发window.onload事件。

在IE中，img对象的加载是不包含在body的加载过程之中的，body加载完毕，window.onload事件触发时，img对象可能还未加载结束，img.onload事件会在window.onload之后触发。

根据上面的问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在Image对象里放置过多的图片，否则在FF下会影响网页的下载速度。当然如果你在window.onload之后，执行预加载函数，就不会有FF中的问题了。

7.实例二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css" media="all">
  div {
  border:#aaaaaa 3px solid;
  width:200px;
  padding:2px;
  margin:2px 9px;
  font-size:12px;
  line-height:22px;
  color:#999999;
  }
  .ipt1 {
  width:160px;
  font-size:12px;
  color:#1F6478;
  border:#999999 1px solid;
  margin-left:9px;
  }
  .ipt2 {
  border:#999999 1px solid;
  margin-left:6px;
  color:#666666
  }
  p {
  margin:0px;
  padding:0px;
  background-image:url(http://www.wxwdesign.cn/attachments/month_0809/v2008925193118.gif);
  background-position:center;
  background-repeat:no-repeat;
  width:200px;
  height:200px;
  text-align:center;
  font-size:12px;
  color:#999999;
  line-height:26px;
  }
  </style>
  <script language="javascript" type="text/javascript">
  function preloadimg(url,obj,ipt){
  var img=new Image();
  obj.innerHTML="<p>图片加载中...</p>";
  img.onload=function(){
  obj.innerHTML="";
  obj.style.width=String(img.width)+"px";
  ipt.style.width=String(img.width-40)+"px";
  obj.appendChild(img);
  };
  img.onerror=function(){
  obj.innerHTML="图片加载错误，请检查网络或URL地址！"};
  img.src=url; //img.src一定要写在img.onload之后，否则在IE中会出现问题
  }
  function show(){
  var div=document.getElementsByTagName("div")[0];
  var input=document.getElementsByTagName("input");
  preloadimg("http://static.cnblogs.com/images/logo_small.gif",div,input[0]);
  input[0].onclick=function(){this.value=""};
  input[1].onclick=function(){preloadimg(input[0].value,div,input[0]);}
  }
  window.onload=show;
  </script>
  <title>JavaScript获取图片大小——wxwdesign.cn</title>
  </head>
  <body>
  <div></div>
  <br />
  <input type="text" value="请输入图片URL地址" class="ipt1"/>
  <input type="button" value="加载" class="ipt2"/>
  </body>
  </html>