Bewegen Sie den Cursor/Hover-Effekt langsam auf IE8

Question

Ich habe eine seltsame Leistung, was in IE8 bemerkt, wenn mit vielen Reihen (100 in diesem Beispiel) auf einem Tisch Mouseover-Ereignisse mit. Ich habe viele verschiedene Ansätze ausprobiert, aber ich finde keine Möglichkeit, es so schnell zu bekommen, wie ich es brauche/brauche.

Wenn ich die Klassen bei jedem Ereignis umschalte, sinkt die Leistung in allen IE-Versionen, und wenn ich direkte Manipulation der CSS über Javascript IE6 und IE7 Geschwindigkeit viel, aber IE8 noch lausig.

Irgendwelche Ideen? Ich würde gerne wissen, was das Mouseover-Event so träge im Vergleich zu allen anderen Browsern macht.

Wenn dies nur IE6 passierte, könnte ich es verstehen und es passieren lassen, aber wenn die neueste Version des Browsers die langsamste ist, wird es nur immer mehr Benutzer mit einer schlechten Erfahrung geben.

Beispiel mit JQuery schweben: http://thedungheap.net/research/

EDIT: ich jetzt dem Beispiel aktualisiert, so dass es leicht ist, den Unterschied zwischen mit 10 Reihen zu sehen und 200. Dieser im gleichen Dokument ist, so kann dies nicht ein Problem mit der ganzen DOM Größe, ich denke

Answer 1

Btw für alle Browser Sie verwenden können: Hover-Wähler nur mit CSS. Und nur für IE6 können Sie Ihre schnellste Lösung hinzufügen.

Answer 2

Haben Sie, um zu sehen versucht, was passiert, wenn Sie nur eine pro Zeile haben? Seltsam, wenn die Anzahl der Elemente im DOM [oder in jeder Zeile] die Leistung beeinträchtigen könnte. Sonst könnte es ein Problem mit der Art sein, wie ie8 Tags in der Selektor-Engine traversiert. Nicht wirklich eine Antwort, aber etwas zu versuchen.

Kein IE8 oder ich würde es selbst versuchen.

Answer 3

Scheint mir schnell genug, ohne tatsächlich auf Metriken zu suchen.

könnten Sie versuchen, Mouseover/mouseout statt Makeln. Sie können auch eine Ereignisdelegierung versuchen, die oft mit diesen vielen Elementen im Dom hilft.

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

Answer 4

Verwenden Sie Event-Bubbling. Fügen Sie das Hover-Ereignis nur der Tabelle hinzu und sehen Sie sich dann das Zielelement an.

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

Answer 5

Ich habe dieses Problem konfrontiert und implementiert die folgende Abhilfe

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",""); 
}); 

Ich hoffe, dass dies für Sie nützlich sein könnten.

Answer 6

Die: Hover ist sehr langsam auf IE8, egal, wie Sie beabsichtigen, es zu implementieren.In der Tat, Onmouseover das Javascript, bietet onmouseout Ereignisse Art und Weise schnellere Methoden für einen Hover-Effekt erzeugt, als CSS

Schnellstes Beispiel auf IE8 tut:

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

Langsamer Beispiel:

<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> 

Sehr langsam Beispiel: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

Leider diese alte auf eine Antwort zu schreiben, aber ich denke, dass es relevant ist und diese Seite gut so von Google auf Platz ...

Wow, ich eine große Menge an Zeit auf dieses gerade ausgegeben Problem, ich habe versucht, Javascript zu verwenden, aber es war immer noch langsam.

Dies ist eine Lösung, wenn Sie den Hintergrund verwenden Bilder:

Das war ein echtes Problem für mich, weil das Projekt, das ich hatte dieses Problem auf die Auswirkungen auf die Links und Rechts Tasten/Pfeile schweben war, die ich benutze um Tabs links und rechts zu animieren, würden die Tabs unter die Buttons, eine Tab - Diashow gehen, wenn ich sagen darf und wenn der Cursor in den Buttonbereich kam, würde das normale Bild verschwinden, das Bild unten wäre für ein paar Millisekunden sichtbar und dann das Hover-Bild würde schließlich angezeigt werden, hässlich.

Die wirkliche Lösung war die Verwendung von Image Sprites, so dass es auch in reinem CSS keine Verzögerung gibt. Die Idee ist, ein einzelnes Bild mit allen verschiedenen Bildzuständen (normal/hover/selected/inactiv/etc) zu haben, das Bild als Hintergrundbild zu setzen und den Hintergrundpositionswert für den Hover-Effekt anzupassen Andere.

Wenn Sie besser über CSS-Sprites wissen wollen: http://css-tricks.com/css-sprites/