使用JQ的animate方法展示进度条时,当进度条多了之后,发现IE8下页面展示非常慢,很卡

oceanmeng 2016-06-04 10:01:09

使用JQ的animate方法展示进度条时,当进度条多了之后,发现IE8下页面展示非常慢,很卡,IE基本卡死了,大于10s后页面才正常,而IE11下渲染非常快,不知道为什么? IE8下有无好的解决办法?



<html>

<head>

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>

<style type="text/css">

<!--

/* barbox */

.barbox{margin:0;height:38px;line-height:18px;overflow:hidden;padding:0px 0 0 0px;}

.barbox dt{float:left;font-size:14px;width:112px;text-align:right;}

.barbox dt a{color:#0048CC;}

.barbox dd{float:left;}

.barbox dd.last{color:#999;}

.barbox dd.barline{width:160px;background:#E3E3E3;height:12px;overflow:hidden;margin:3px 0px 0 0px;display:inline;border-bottom:solid 1px #F4F4F4;border-right:solid 1px #F4F4F4;}



.barbox dd.barline div.chartsBT00{height:10px;overflow:hidden;background:url(/zygl/images/barbg6.gif) repeat-x;}

.barbox dd.barline div.chartsBT00.barred{background-position:0 0;border:1px solid #C2142C;}

.barbox dd.barline div.chartsBT00.baryellow{background-position:0 -10px;border:1px solid #EFA804;}

.barbox dd.barline div.chartsBT00.barblue{background-position:0 -20px;border:1px solid #0A83E6;}

.barbox dd.barline div.chartsBT00.bargreen{background-position:0 -30px;border:1px solid #04fc33;}

.barbox dd.barline div.chartsBT00.barpurple{background-position:0 -40px;border:1px solid #f403fd;}

.barbox dd.barline div.chartsBT00.bargreenyellow{background-position:0 -50px;border:1px solid #ccff00;}

-->

</style>

</head>

<body>

<table  border="1" cellspacing="0" align="center" width="100%"  cellpadding="0" class="lookinnertable" id="tableBT00">

<tbody>

<tr height="25" class="turnbgcolor2" onMouseOut="this.className='turnbgcolor2'" onMouseOver="this.className='changecolor'">



<td style="background-color:#99ffff;" class="turnbgcolor2"  align="center"  rowspan="2" width="60">

20160531

</td>

<td class="turnbgcolor2" nowrap>Σ<br>SMART</td>

<td class="turnbgcolor2" align="left" width="210px" nowrap>



	<dl class="barbox">

		<dd class="barline">

			<div divindex="3" id="chartSlide_3" w="97.30" style="width:0px;" class="chartsBT00"></div>

		</dd><font style="COLOR:black;FONT-WEIGHT:normal" >97.30%</font>

		<br>(5692/5850)

		<font style="font-size:10px">[1月内有交易]</font>

	</dl>



</td>

<td bgcolor="Thistle"></td>

<td class="turnbgcolor2" align="right">

5677/<font style="color:red;font-weight:normal"></font></td>

<td class="turnbgcolor2" align="right">2625981</td>

<td class="turnbgcolor2" align="center" dypop="按 00、89(日切)、08(密码错)、15(密码错)算成功"><font style="COLOR:black;FONT-WEIGHT:bold"  dypop="按 00、89(日切)、08(密码错)、15(密码错)算成功">94.90%</font></td>

<td bgcolor="Thistle"></td>

<td class="turnbgcolor2" align="right">/</td>

<td class="turnbgcolor2" align="right">5613</td>

<td class="turnbgcolor2" align="right">141913</td>

<td class="turnbgcolor2" align="right" dypop="按 00、89(日切)、08(密码错)、15(密码错)算成功"><font style="COLOR:blue;FONT-WEIGHT:bold"  dypop="按 00、89(日切)、08(密码错)、15(密码错)算成功">94.32%</font></td>

<td class="turnbgcolor2" align="right">

南:1885台/47690笔//</td>

<td class="turnbgcolor2" align="right">

北:3728台/94223笔//</td>

<td class="turnbgcolor2" align="left" nowrap></td>

<td class="turnbgcolor2" align="right"><input type="button" name="Memobtn" idx="subreset2" value="备注" title="点击查看/维护备注信息" onclick="javascript:LaunchMemo('5326');"></td>

</tr>

</tbody>



....

....

.....

.....

.....

</table>

</body>

</html>



<script language="javascript">

function animate(sNO){

	var Color1="barred";

	var Color2="baryellow";

	var Color3="barblue";	

	var Color4="bargreen";	

	var Color5="barpurple";	

	var Color6="bargreenyellow";



	$(".charts"+sNO).each(function(i,item){

		var addStyle="";

		var divindex=parseInt($(item).attr("divindex"));

        switch(divindex){

         case 1:

         addStyle=Color1;

         break;

         case 2:

         addStyle=Color2;

         break;

         case 3:

         addStyle=Color3;

         break;

         case 4:

         addStyle=Color4;

         break;

         case 5:

         addStyle=Color5;

         break;

         case 6:

         addStyle=Color6;

         break;

        }



		$(item).addClass(addStyle);

		var a=$(item).attr("w");

		$(item).animate({

			width: a+"%"

		},6000);

	});

	

}

animate("BT00");

</script>