C++博客-教父的告白-随笔分类-HTML5http://www.cppblog.com/keigoliye/category/13855.html一切都是纸老虎zh-cnThu, 20 May 2010 17:03:02 GMTThu, 20 May 2010 17:03:02 GMT60js效果 图片加载进度实时显示http://www.cppblog.com/keigoliye/archive/2010/05/21/115991.html暗夜教父暗夜教父Thu, 20 May 2010 16:49:00 GMThttp://www.cppblog.com/keigoliye/archive/2010/05/21/115991.htmlhttp://www.cppblog.com/keigoliye/comments/115991.htmlhttp://www.cppblog.com/keigoliye/archive/2010/05/21/115991.html#Feedback0http://www.cppblog.com/keigoliye/comments/commentRss/115991.htmlhttp://www.cppblog.com/keigoliye/services/trackbacks/115991.html

<script>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
function chk(){
  l--;
  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
  if (l==0){
     for (var i=0;i<sum;i++)
       document.body.innerHTML+="<img src='"+imgs[i].src+"'>"
  }
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
imgs[5]=new Image()
imgs[6]=new Image()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}

</script>
<body>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
  imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>





-----------------------------另外一个-------------------

<!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(){

  //自定义的<a href="http://www.xitongwang.com" target="_blank">系统</a>参数，保存指定的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>



暗夜教父 2010-05-21 00:49 发表评论
]]>HTML5尝鲜(让canvas像flash一样工作,从而制作复杂的动画)http://www.cppblog.com/keigoliye/archive/2010/05/20/115870.html暗夜教父暗夜教父Thu, 20 May 2010 01:41:00 GMThttp://www.cppblog.com/keigoliye/archive/2010/05/20/115870.htmlhttp://www.cppblog.com/keigoliye/comments/115870.htmlhttp://www.cppblog.com/keigoliye/archive/2010/05/20/115870.html#Feedback0http://www.cppblog.com/keigoliye/comments/commentRss/115870.htmlhttp://www.cppblog.com/keigoliye/services/trackbacks/115870.html阅读全文

暗夜教父 2010-05-20 09:41 发表评论
]]>