javascript dom中的Image对象——图像预加载 -

uop_hai

浏览: 18978 次
性别:
来自: 广州

最近访客更多访客>>

瓜中之瓜

拥有沵的爱

envy913

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript dom中的Image对象——图像预加载

博客分类：

web优化速度

JavaScript IE 浏览器 XHTML .net

在做一些tips效果，或者是一些图片浏览效果时，图片开始是隐藏的，当用户进行一定的操作时，图片会根据需要显示出来。但图片文件都相对比较大，如果一下子都显示出来，很耗时间和流量，如果都不显示，等触发一定事件时再加载，用户体验又不太好，增加用户的等待时间。
     权衡一下利弊，可以有选择的利用JavaScript预加载一些需要的图片，先将其装入DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。 JavaScript里的Image对象可以很好的实现这一需求，在FF下通过alert(img对象)可以看到“object HTMLImageElement“内容，Image对象可以直接利用append添加到body里面去，调用十分方便。

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

建立图像对象：
格式：

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

图像对象的属性：
border complete height hspace lowsrc name src vspace width

图像对象的事件：
onabort onerror onkeydown onkeypress onkeyup onload

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

参考代码：
程序代码
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中的问题了。

示例：
HTML代码

<!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://book.csdn.net/smallimg/csdbblo2.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>

分享到：