Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Khrys

Lag ao usar onMouseOver e onMouseOut para mudar estilo

Por , em Javascript

Recommended Posts

Khrys    0

Khrys
Postado

Boa tarde,

 

Estou usando o recurso onMouseOver e onMouseOut para mudar o estilo de algumas células. Funciona muito bem, mas a performance cai muito quando a quantidade de linhas da tabela aumenta. Até umas 500 linhas fica tranquilo... mas indo prá 1.000, 4.000 o bicho pega... eu passo o mouse, conto até 7, aí o estilo muda... depois tiro o mais, mais 7 e o estilo volta.

 

Fiz alguns testes. Criei uma outra tabela na mesma página que tem os 4.000 itens e na tabela sem os itens o estilo foram trocados muito rápido. Ou seja, é algo dependente da tabela em si, e não de qualquer item que está na página.

 

O código é esse:

 

<td class='CabecalhoOrderActive' onMouseOver="this.className='CabecalhoOrderActiveLight';" onMouseOut="this.className='CabecalhoOrderActive';" onClick=window.location='Resultado.asp'></td>"

 

O CSS:

 

td.CabecalhoOrderActive
{
background: #8AA9BE url(../img/cabecalhoorder.jpg) repeat-x;
}

td.CabecalhoOrderActiveLight
{
background: #8AA9BE url(../img/cabecalhoorder_light.jpg) repeat-x;
cursor: hand;
}

 

A imagem tem 1px de largura por 10px altura... é bem pequena... não consigo ver uma forma de otimizar esse código. Alguém tem alguma sugestão?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Khrys    0

Khrys
Postado

Obrigado pelo retorno Ted e Buthy, gerei um código para teste mas pelo visto dessa forma o lag também existe. Sinistro ã? Ah sim, pequeno detalhe... no IE somente... testei no firefox aqui e só com umas 50.000 linhas que ele tem um leve lag... mas como não vou chegar nisso, tá de boa... hehehe

 

Vejam:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
font-family: verdana;
font-size: 24px;
}

table {
width: 100%;
}

thead { font-weight: bold; }

thead:hover { 
background-color: red; 
color: blue;
cursor: hand;
}

tbody tr:hover {
background-color: green; 
color: blue;
}

</style>

</head>

<body>
<table>
	<thead>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
			<td>D</td>
		</tr>
	</thead>
	<%
		for i=1 to 5000
	%>
	<tr>
		<td>Conteudo da A</td>
		<td>Conteudo da B</td>
		<td>Conteudo da C</td>
		<td>Conteudo da D</td>
	</tr>
	<%
		next
	%>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o IE não reconhece o pseudo :hover, nos outros elementos. Ele só reconhece para a tag a

 

com javascript:

http://wbruno.com.br/blog/2011/03/12/destacar-tr-de-tabela-zebrada-ao-passar-o-mouse-voltando-a-cor-original-ao-sair/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Khrys    0

Khrys
Postado

O ie6 não reconhece, do ie7 prá frente sim. A questão nem é o reconhecimento ou não, e sim o lag. De qualquer forma obrigado pelo reply, vou ver esse código e tentar adaptá-lo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito