Mouseover/hover effet lent sur IE8

J'ai remarqué une étrange performance de chose dans IE8 lors de l'utilisation de la souris événements sur une table avec le nombre 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 j'ai changer de classe à chaque événement de la performance descend dans toutes les versions IE, et Si j'utilise la manipulation directe de la CSS à l'aide de javascript IE6 et IE7 accélère beaucoup, mais IE8 effectue toujours moche.

Des idées ? J'aimerais 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 ce n'est arrivé qu'à IE6 j'ai pu comprendre et de le laisser passer, mais lorsque la nouvelle version du navigateur est la plus lente, il va devenir de plus en plus d'utilisateurs avec une mauvaise expérience.

Exemple à l'aide de JQuery hover: http://thedungheap.net/research/

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

  • Aimerais entendre la réponse à cette question puisque je suis d'avoir exactement le même problème. Le problème est que je ne peux pas utiliser le css :hover solution que le hover événement doit changer le style d'un élément différent que celui de la souris est au-dessus.
InformationsquelleAutor bobmoff | 2009-10-06
  1. 5

    Le :hover EST très lent sur IE8, peu importe comment vous avez l'intention de la mettre en œuvre. En fait, le javascript onmouseover, onmouseout événements offre un moyen plus rapide des méthodes pour la création d'un hover effet, que les CSS ne

    Plus rapide exemple 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>
    • Bien que je ne l'ai le problème, mais pour cet exemple particulier, mon IE8 fonctionne fast & fines.
    • Essayez d'ajouter 100 lignes de votre échantillon. Ensuite, ouvrez votre liste de Tâches [Ctrl+Shit+Esc] et montre comment IExplore va jusqu'à max du CPU pendant que vous déplacez le pointeur d'avant en arrière sur vos lignes.
    InformationsquelleAutor Thomas Williams
  2. 4

    Btw pour tous les navigateurs, vous pouvez utiliser :placez le sélecteur à l'aide de css. Et que pour IE6, vous pouvez ajouter votre plus rapide soluton.

    • En fait, vous ne pouvez pas, comme :hover s'applique à a éléments seulement.
    • dans IE6 seulement. Tous les autres navigateurs prennent en charge :hover pour n'importe quel élément.
    • Ouais, CSS sera toujours plus rapide que le JavaScript. Vous devriez vraiment utiliser JavaScript lorsque vous pour pour.
    InformationsquelleAutor Kane
  3. 1

    Essayez d'utiliser de remontée d'événements. Ajouter le hover événement à la table, et 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');
    });
});
    InformationsquelleAutor Justin Johnson
  4. 0

    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. Autrement, il pourrait être un problème avec la façon ie8 traverse les balises dans le sélecteur de moteur. Pas vraiment une réponse, mais de tenter quelque chose.

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

    • J'ai essayé avec une seule colonne et qui est bien sûr plus rapide, mais si je augmenter la quantité de lignes ont le même nombre d'éléments à l'intérieur de la table, il est lent à nouveau, de sorte qu'il semble être verrouillé à la façon dont de nombreux éléments est entre à l'intérieur de la balise table.
    InformationsquelleAutor Mgan
  5. 0

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

    Vous pouvez essayer de passer la souris/mouseout au lieu de basculement. Vous pouvez également essayer d'événement délégation, ce qui aide souvent avec ce nombre d'éléments dans le dom.

        $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });
    • Justin a suggéré, j'ai essayé de remontée d'événements(délégation), mais ne peux pas le faire fonctionner, regardez le lien: thedungheap.net/research/eventbubbling.aspx
    • J'ai aussi essayé de passer la souris/mouseout sans aucune différence dans les performances
    InformationsquelleAutor ScottE
  6. 0

    J'ai été confronté à ce problème et mis en œuvre la solution de contournement 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.

    InformationsquelleAutor Amer
  7. 0

    Désolé de poster une réponse à ce vieux, mais je pense que c'est pertinent et que cette page est bien classé par google, donc...

    Wow, je viens de passer une grande quantité de temps sur ce problème, j'ai essayé d'utiliser Javascript, mais c'est toujours lent.

    C'est une solution si vous utiliser le fond images :

    C'était un réel problème pour moi, parce que le projet que j'ai eu ce problème a été en vol stationnaire effet sur les boutons Gauche et Droit /flèches que j'ai utiliser pour animer des onglets à gauche et à droite, les plaquettes de passer sous les boutons, un onglet diaporama, si je puis dire et quand le curseur est entré le bouton de la zone de l'image normale disparaissent, l'image ci-dessous pour être visible pendant quelques millisecs et puis, le hover image serait finalement affichage, laid.

    La vraie solution était d'utiliser les sprites d'image, de cette façon il n'y a absolument pas de lag, même en pur css. L'idée est d'avoir une seule image avec toutes les différentes images de l'intérieur des états (normal /stationnaire /choisi /inactif /etc), vous pouvez définir l'image comme image de fond d'écran, et il vous suffit d'ajuster l'arrière-plan-valeur de position pour le décollage effet et d'autres.

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

    InformationsquelleAutor Michel