简单的图片加载类

最新推荐文章于 2024-10-01 22:49:57 发布

danruo

最新推荐文章于 2024-10-01 22:49:57 发布

阅读量958

点赞数

分类专栏： HTML/XHTML/CSS 文章标签： function opera border 测试 xhtml url

HTML/XHTML/CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

来自 blueidea 作者子乌

用途：图片经常使用onload来改变宽度，但这样会出现图片的闪烁，这个简单的类就是用来解决这个问题的。

在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>图片加载类测试</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.οnlοad=function(){ window.imageLoaders[this.uid].timer=setInterval("if (document.readyState=='complete'){window.imageComplete('"+this.uid+"');}",500); } imgObj.οnerrοr=function(){window.status='加载'+src+'失败';} } } var ii=new ImageLoader(); ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/7.jpg",'i61',100,100,"i61") ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/8.jpg",'i62',100,100,"i62") ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/9.jpg",'i63',100,100,"i63") ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/10.jpg",'i64',100,100,"i64") ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/11.jpg",'i65',120,100,"i65") ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/12.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("http://www.blueidea.com/articleimg/2003/12/1461/1303813-Jans.jpg",'测试',100,100) ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/1303820-Febs.jpg",'测试2',100,130) ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/1303832-Mars.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("http://www.blueidea.com/articleimg/2003/12/1461/1303838-Apr.jpg",'i4',160,100) ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/1303899-May.jpg",'i5',100,150,'test'); ii.loadImage("http://www.blueidea.com/articleimg/2003/12/1461/1303899-Jun.jpg",'i6',100,100,false) </script> </div> </body> </html>