简单的图片加载类

来源：互联网发布：网络销售主要做什么编辑：程序博客网时间：2024/04/19 12:47

来自 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);elsewindow.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;elseif (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，将直接插入一个imgthis.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("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>