Effet mouillage / vol stationnaire lent sur IE8

j'ai remarqué une performance étrange dans IE8 lors de l'utilisation des évènements mouseover sur une table avec beaucoup de lignes (100 dans cet exemple). J'ai essayé beaucoup de différentes approches, mais je n'arrive pas à trouver une façon d'obtenir aussi vite que je l'aime/besoin.

si je commute les classes sur chaque événement la performance descend dans toutes les versions de IE, et si j'utilise la manipulation directe du CSS par javascript IE6 et IE7 accélère alot, mais IE8 fonctionne toujours nul.

des idées ? Je voudrais vraiment savoir ce que c'est qui rend l'événement mouseover pour effectuer de la sorte faible par rapport à tous les autres navigateurs.

si cela n'est arrivé qu'à IE6 je pourrais comprendre et laisser passer, mais quand la nouvelle version du navigateur est la plus lente, il y aura seulement de plus en plus d'utilisateurs avec une mauvaise expérience.

Exemple d'utilisation de JQuery hover: http://thedungheap.net/research/

EDIT: j'ai maintenant mis à jour l'exemple pour qu'il soit facile de voir la différence entre avoir 10 lignes et 200. C'est dans le même document, donc ça ne peut pas être un problème avec toute la taille du DOM, je suppose

17
demandé sur bobmoff 2009-10-06 20:30:28

7 réponses

le :hover est très lent sur IE8, peu importe comment vous avez l'intention de l'implémenter. En fait, le javascript onmouseover, onmouseout events fournit des méthodes beaucoup plus rapides pour créer un effet de hover, que CSS ne le fait

exemple le plus rapide sur IE8:

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

plus Lent exemple:

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

TRÈS lent exemple: 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>
6
répondu Thomas Williams 2014-07-09 06:14:55

Btw pour tous les navigateurs, vous pouvez utiliser: hover selector en utilisant CSS seulement. Et seulement pour IE6 vous pouvez ajouter votre soluton le plus rapide.

4
répondu Kane 2009-10-06 16:39:01

essayez d'utiliser des bulles d'événements. Ajoutez l'événement de vol stationnaire au tableau seulement, puis regardez l'élément cible.

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});
1
répondu Justin Johnson 2009-10-06 16:49:01

Avez-vous essayé de voir ce qui se passe si vous avez seulement un par ligne? Curieux de savoir si c'est le nombre d'éléments dans le DOM [ou dans chaque ligne] pourrait affecter les performances. Sinon, cela pourrait être un problème avec la façon dont ie8 traverse les étiquettes dans le moteur de sélection. Pas vraiment une réponse, mais quelque chose à essayer.

Pas de IE8 ou je vais l'essayer moi-même.

0
répondu Mgan 2009-10-06 16:41:04

Semble assez rapide pour moi, sans réellement regarder métriques.

vous pourriez essayer mouseover / mouseout au lieu de toggling. Vous pouvez également essayer la délégation d'événement, qui aide souvent avec ces nombreux éléments dans le dom.

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });
0
répondu ScottE 2009-10-06 16:46:36

j'ai fait face à ce problème et mis en œuvre la solution suivante

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

j'espère que cela pourrait être utile pour vous.

0
répondu Amer 2009-12-09 10:23:12

désolé de poster sur une réponse aussi ancienne mais je pense qu'il est pertinent et cette page est bien classé par google so...

Wow, je viens de passer beaucoup de temps sur ce problème, j'ai essayé D'utiliser Javascript, mais c'était encore lent.

C'est une solution si vous utilisez d'arrière-plan images:

C'était un vrai problème pour moi, parce que le projet sur lequel j'ai eu ce problème était l'effet de vol stationnaire sur les boutons / flèches gauche et droite que j'utilise pour animer les onglets gauche et droite, les onglets passeraient sous les boutons, un diaporama des onglets si je puis dire et quand le curseur est entré dans la zone du bouton l'image normale disparaîtrait, l'image ci-dessous serait visible pour quelques millisecondes et puis, l'image en stationnaire serait éventuellement afficher, laid.

la vraie solution était d'utiliser des Sprites d'image, de cette façon il n'y a absolument aucun retard, même dans CSS pur. L'idée est d'avoir une seule image avec toutes les différentes images États insides (normal / hover / selected / inactive / etc), vous définissez l'image comme background-image, et vous ajustez simplement la valeur background-position pour l'effet hover et d'autres.

Si vous souhaitez mieux connaitre les sprites css : http://css-tricks.com/css-sprites/

0
répondu Michel 2013-04-17 20:21:49