好用的JS图片预加载类

作者：子乌来源：蓝色理想时间：2007-08-13 13:49:00　

用途：图片经常使用onload来改变宽度，但这样会出现图片的闪烁，这个简单的类就是用来解决这个问题的。函数loadImage，用来加载图片，可以在head中直接使用，也可以在你所需要的位置使用。

参数：
url:图片url
alt:图片alt
maxWidth:最大宽度，可不设置
maxHeight:最大高度，可不设置
id:图片img的id,如果查找不到这个id，直接在所在位置插入一个img

在ie6，opera8.5+，ff1.5下测试通过

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>好用的JS图片预加载类 - asp之家</title><meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" /><meta name="Author" content="Sheneyan" /><script type="text/javascript">//<![CDATA[/**************************简单的图片加载类*功能：避免了在img 里直接判断宽高造成屏幕的闪烁*函数：loadImage，用来加载图片，可以在head中直接使用，也可以在你所需要的位置使用。*参数：*url:图片url*alt:图片alt*maxWidth:最大宽度，可不设置*maxHeight:最大高度，可不设置*id:图片img的id,如果查找不到这个id，直接在所在位置插入一个img*作者：子乌,sheneyan*************************/ImageLoader=function(){ //自定义的系统参数，保存指定的Image对象 if (!window.imageLoaders) window.imageLoaders={}; //将所有列表中的图片默认隐藏,在系统加载完毕后立即执行，不过opera的加载机制似乎与ie和ff不同，它会等所有图片都加载完才执行onload，所以这些代码实际作用不大... window.hideImage=function(){ for (a in window.imageLoaders)document.getElementById(a).style.display='none'; } if (document.all) window.attachEvent("onload",window.hideImage); else window.addEventListener('load',window.hideImage,false); //兼容ff，ff底下没有readyState参数，在开始事件中设置document.readyState来模拟ie的效果 if (!document.all) window.addEventListener('load',function(){document.readyState='complete'},false) //自定义的图片加载方法 window.imageComplete=function(i){ var obj=window.imageLoaders[i]; clearInterval(obj.timer); var mw=obj.maxWidth; var mh=obj.maxHeight; var id=obj.uid; var img=document.getElementById(id); if (!img){ img=document.createElement("img"); img.style.display='none'; img.setAttribute('id',id); document.body.appendChild(img); } if (obj.width>obj.height) if (mw>0) if (obj.width>mw) img.width=mw; else if (mh>0) if (obj.height>mh) img.height=mh; img.src=obj.src; img.alt=obj.alt; img.style.display=''; window.imageLoaders[i]=null; } //加载图片方法，如果id不提供，或者为false，将直接插入一个img this.loadImage=function(url,alt,maxWidth,maxHeight,id){ var imgObj=new Image(); imgObj.src=url; imgObj.uid=id; imgObj.alt=alt; imgObj.maxWidth=maxWidth; imgObj.maxHeight=maxHeight; if (!id){ imgObj.uid='img_sheneyan_'+Math.random()*100;/*hutia的写法： document.write(String.fromCharCode(60)+"img src='' id='"+imgObj.uid+"'/"+String.fromCharCode(62))*//*mirycat的写法：前后加CDATA*/ document.write("<img src='' id='"+imgObj.uid+"'/>") } window.imageLoaders[imgObj.uid]=imgObj; imgObj.onload=function(){ window.imageLoaders[this.uid].timer=setInterval("if (document.readyState=='complete'){window.imageComplete('"+this.uid+"');}",500); } imgObj.onerror=function(){window.status='加载'+src+'失败';} } }var ii=new ImageLoader();ii.loadImage("/file/UploadPic/20078/13/200781314615752.jpg",'i61',100,100,"i61")ii.loadImage("/file/UploadPic/20078/13/200781314617874.jpg",'i62',100,100,"i62")ii.loadImage("/file/UploadPic/20078/13/200781314617393.jpg",'i63',100,100,"i63")ii.loadImage("/file/UploadPic/20078/13/200781314617407.jpg",'i64',100,100,"i64")ii.loadImage("/file/UploadPic/20078/13/200781314618696.jpg",'i65',120,100,"i65")ii.loadImage("/file/UploadPic/20078/13/200781314619838.jpg",'i66',100,100,"i66")//]]></script></head><body><p><img src='' id= "i61" alt=''/><img src='' id= "i62" alt=''/><img src='' id= "i63" alt='' /><img src='' id= "i64" alt=''/><img src='' id= "i65" alt=''/><img src='' id= "i66" alt=''/></p><div style="background:green;"><img src='' id='test' alt=''/></div><div style="border:solid 1px;position:absolute;left:100px;top:150px;padding:10px;background:red"><script type="text/javascript">ii.loadImage("/file/UploadPic/20078/13/200781314619788.jpg",'aspxhome.com',100,100)ii.loadImage("/file/UploadPic/20078/13/200781314619352.jpg",'asp之家',100,130)ii.loadImage("/file/UploadPic/20078/13/200781314619391.jpg",'i3',100,100)</script></div><div style="border:solid 1px;position:absolute;left:100px;top:350px;padding:10px;background:blue"><script type="text/javascript">ii.loadImage("/file/UploadPic/20078/13/200781314620905.jpg",'i4',160,100)ii.loadImage("/file/UploadPic/20078/13/200781314622644.jpg",'i5',100,150,'test');ii.loadImage("/file/UploadPic/20078/13/200781314622236.jpg",'i6',100,100,false)</script></div></body></html>

[提示：你可先修改部分代码，再按运行]

标签：图片加载,js

投稿

好用的JS图片预加载类

猜你喜欢

2008年情人节各网站节日Logo欣赏

Mootools 1.2教程(20)——选项卡效果（Tabs）

asp如何自动更新导航栏？

asp实现*号隐藏IP地址

sql server not in 语句使程充崩溃

ASP调试方法图文教程

ASP+ajax注册即时提示程序代码

长文章自动分页asp实例-支持HTML

教你轻松掌握如何正确的修复Access数据库

ORACLE数据库应用开发常见问题及排除

编写SQL需要注意的细节Checklist总结

各种鼠标经过图片边框加粗效果整理

asp.net性能的技巧

字符，字节和编码

asp 判断是否为搜索引擎蜘蛛的代码

自己收集比较强大的分页存储过程推荐

一个完美网站的101项指标.第四部分.设计

网页设计图标使用指南[译]

oracle & mysql 多实例启动区别

css基础教程之序曲

好用的JS图片预加载类

猜你喜欢

2008年情人节各网站节日Logo欣赏

Mootools 1.2教程(20)——选项卡效果（Tabs）

asp如何自动更新导航栏？

asp实现*号隐藏IP地址

sql server not in 语句使程充崩溃

ASP调试方法图文教程

ASP+ajax注册即时提示程序代码

长文章自动分页asp实例-支持HTML

教你轻松掌握如何正确的修复Access数据库

ORACLE数据库应用开发常见问题及排除

编写SQL需要注意的细节Checklist总结

各种鼠标经过图片边框加粗效果整理

asp.net性能的技巧

字符，字节和编码

asp 判断是否为搜索引擎蜘蛛的代码

自己收集比较强大的分页存储过程 推荐

一个完美网站的101项指标.第四部分.设计

网页设计图标使用指南[译]

oracle & mysql 多实例启动区别

css基础教程之序曲

自己收集比较强大的分页存储过程推荐