首页 >> JavaScript >> Js高级编程 >> 好用的JS图片预加载类

好用的JS图片预加载类

作者:子乌来源:蓝色理想时间:2007-8-13 网友评论条【大中小】

用途：图片经常使用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("/article/UploadPic/20078/13/200781314615752.jpg",'i61',100,100,"i61") ii.loadImage("/article/UploadPic/20078/13/200781314617874.jpg",'i62',100,100,"i62") ii.loadImage("/article/UploadPic/20078/13/200781314617393.jpg",'i63',100,100,"i63") ii.loadImage("/article/UploadPic/20078/13/200781314617407.jpg",'i64',100,100,"i64") ii.loadImage("/article/UploadPic/20078/13/200781314618696.jpg",'i65',120,100,"i65") ii.loadImage("/article/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("/article/UploadPic/20078/13/200781314619788.jpg",'aspxhome.com',100,100) ii.loadImage("/article/UploadPic/20078/13/200781314619352.jpg",'中国asp之家',100,130) ii.loadImage("/article/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("/article/UploadPic/20078/13/200781314620905.jpg",'i4',160,100) ii.loadImage("/article/UploadPic/20078/13/200781314622644.jpg",'i5',100,150,'test'); ii.loadImage("/article/UploadPic/20078/13/200781314622236.jpg",'i6',100,100,false) </script> </div> </body> </html>

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

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/program/20078/133413.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

好用的JS图片预加载类

Aspxhome.com. 中国Asp之家. 版权所有