Effetto mouseover/hover lento su IE8

Question

Ho notato una cosa strana sulle prestazioni in IE8 quando si utilizzano eventi mouseover su una tabella con molte righe (100 in questo esempio). Ho provato un sacco di approcci diversi ma non riesco a trovare alcun modo per farlo velocemente come mi piace/ho bisogno.

Se cambio classe in ogni evento, le prestazioni si riducono in tutte le versioni di IE e se utilizzo la manipolazione diretta del CSS tramite javascript, IE6 e IE7 accelera molto, ma IE8 funziona ancora male.

Qualche idea? Mi piacerebbe davvero sapere cosa rende l'evento mouseover così performante rispetto a tutti gli altri browser.

Se questo è successo solo a IE6, ho potuto capire e lasciarlo passare, ma quando la versione più recente del browser è la più lenta, ci saranno sempre più utenti con una brutta esperienza.

Esempio con JQuery presso: http://thedungheap.net/research/

EDIT: Ora ho aggiornato l'esempio in modo che sia facile vedere la differenza tra avere 10 righe e 200. Questo è nello stesso documento, quindi questo non può essere un problema con l'intera dimensione DOM, credo

Answer 1

Btw per tutti i browser che è possibile utilizzare: hover selector utilizzando solo CSS. E solo per IE6 puoi aggiungere il tuo soluton più veloce.

Answer 2

Hai provato a vedere cosa succede se ne hai uno solo per riga? Curioso se è il numero di elementi nel DOM [o in ogni riga] potrebbe influenzare le prestazioni. In caso contrario, potrebbe essere un problema con il modo in cui vale a dire 8 attraversa i tag nel motore di selezione. Non è davvero una risposta, ma qualcosa da provare.

No IE8 o lo proverei anch'io.

Answer 3

Sembra abbastanza veloce per me, senza effettivamente guardare le metriche.

Si potrebbe provare mouseover/mouseout invece di commutare. Puoi anche provare la delega degli eventi, che spesso aiuta con questi numerosi elementi nella dom.

$("tr").mouseover(function() { 
      $(this).css('backgroundColor', '#ffc000'); 
     }) 
     .mouseout(function() { 
      $(this).css('backgroundColor', '#fff'); 
     }); 

Answer 4

Provare a utilizzare il bubbling degli eventi. Aggiungi l'evento di passaggio del mouse solo alla tabella, quindi guarda l'elemento di destinazione.

$(function() { 
    $('table').hover(function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000'); 
    }, function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#fff'); 
    }); 
}); 

Answer 5

ho affrontato questo problema e implementata la seguente soluzione

var viewTable = jQuery("table.MyTable"); 
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body"); 
var highlightColor = temDiv.css("background-color"); 
viewTable.mouseover(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor); 
}).mouseout(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color",""); 
}); 

Spero che questo potrebbe essere utile per voi.

Answer 6

Il: hover È molto lento su IE8, indipendentemente da come si intende implementarlo.In realtà, il javascript onmouseover, onmouseout eventi fornisce metodi modo più veloce per la creazione di un effetto hover, di CSS non

più veloce esempio su IE8:

<table> 
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'"> 
    <td>foo bar</td> 
</tr> 
</table> 

lento esempio:

<style type="text/css"> 
    tr.S1 {background-color:#000000} 
    tr.S2 {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'"> 
    <td>foo bar</td> 
</tr> 
</table> 

Esempio MOLTO lento:JSFiddle

<style type="text/css"> 
    tr.S  {background-color:#000000} 
    tr.S:hover {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S"> 
    <td>foo bar</td> 
</tr> 
</table> 

Answer 7

dispiace scrivere un commento sul una risposta questo vecchio, ma penso che sia rilevante e questa pagina è ben posizionato da Google in modo ...

Wow, ho appena speso una grande quantità di tempo su questo problema, ho provato a usare Javascript, ma era ancora lento.

Questa è una soluzione se si utilizza sfondo immagini:

Questo è stato un vero problema per me, perché il progetto ho avuto questo problema sul era l'effetto hover a sinistra ea destra i pulsanti/frecce che uso per animare le schede a sinistra ea destra, le schede passano sotto i pulsanti, una presentazione a schede se posso dire e quando il cursore è entrato nell'area dei pulsanti, l'immagine normale scompare, l'immagine sotto sarebbe visibile per alcuni millisecondi e quindi, l'immagine al passaggio del mouse finirà per mostrarsi brutta.

La vera soluzione era utilizzare gli sprite di immagini, in questo modo non vi è assolutamente alcun ritardo anche nel puro css. L'idea è di avere una singola immagine con tutte le immagini differenti all'interno di un'immagine (normale/hover/selezionata/inattiva/ecc.), Si imposta l'immagine come immagine di sfondo e si regola semplicemente il valore della posizione di sfondo per l'effetto hover e altri.

Se volete conoscere meglio sprite CSS: http://css-tricks.com/css-sprites/