javascript dom中的Image对象——图像预加载
来源:互联网 发布:淘宝网阿迪达斯女鞋 编辑:程序博客网 时间:2024/05/16 00:42
在做一些tips效果,或者是一些图片浏览效果时,图片开始是隐藏的,当用户进行一定的操作时,图片会根据需要显示出来。但图片文件都相对比较大,如果一下子都显示出来,很耗时间和流量,如果都不显示,等触发一定事件时再加载,用户体验又不太好,增加用户的等待时间。
权衡一下利弊,可以有选择的利用JavaScript预加载一些需要的图片,先将其装入DOM,等到需要的时候,直接调用,省掉等待的时间,直接显示出来。JavaScript里的Image对象可以很好的实现这一需求,在FF下通过alert(img对象)可以看到“objectHTMLImageElement“内容,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中会出错。
参考代码:
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中的问题了。
示例:
<!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>
- javascript dom中的Image对象——图像预加载
- 预加载与JavaScript的Image()对象
- Javascript中的Image对象
- javascript中的dom对象
- javascript中的Dom对象
- javascript中的Dom对象(续)
- JavaScript方法中的DOM对象
- JavaScript DOM 中的内置对象
- HTML,javascript,image等加载,DOM解析,js执行生命周期
- JavaScript中的BOM对象和DOM对象
- Image Load Events——图像加载事件
- JavaScript进阶学习——DOM对象
- JavaScript学习——DOM对象
- JavaScript—DOM 核心之Node对象
- Image 加载图像
- javaScript中的对象、BOM、DOM知识点总结
- JavaScript 的Image对象、图像渲染和浏览器缓存
- javascript中dom编程(html dom中的常见对象)
- 初来乍到!
- 更改计算机名不重启机器即可生效的批处理
- 在Azure平台上使用托管卡进行身份认证
- 修改eclipse新建jsp页面后的默认的编码格式
- ASP.NET HttpModule——原理
- javascript dom中的Image对象——图像预加载
- 做简单系统
- 学习C++:实践者的方法(Beta1)(转)
- 在批处理里禁用网卡本地连接方案分析
- Oracle维护常用SQL语句
- ComboBoxTree
- Hello F#
- 一本关于网上支付解决方案的小型百科全书
- 利用VB设计打印复杂报表