Эффект мыши при наведении курсора на IE8 замедлен - PullRequest
Новая
       29

Эффект мыши при наведении курсора на IE8 замедлен

17 голосов
/ 06 октября 2009

Я заметил странную проблему с производительностью в IE8 при использовании событий наведения курсора на таблицу со многими строками (в этом примере - 100). Я пробовал много разных подходов, но я не могу найти способ получить его так быстро, как мне нравится / нужно.

Если я переключаю классы в каждом событии, производительность снижается во всех версиях IE, и если я использую прямые манипуляции с CSS посредством javascript, IE6 и IE7 значительно ускоряют работу, но IE8 все еще выполняет паршиво.

Есть идеи? Я действительно хотел бы знать, что делает событие наведения мыши таким медленным, по сравнению со всеми другими браузерами.

Если бы это случилось только с IE6, я мог бы понять и позволить этому пройти, но когда самая новая версия браузера является самой медленной, будет только больше и больше пользователей с плохим опытом.

Пример использования JQuery hover: http://thedungheap.net/research/

РЕДАКТИРОВАТЬ: Я обновил пример, чтобы было легко увидеть разницу между наличием 10 строк и 200. Это в одном документе, поэтому это не может быть проблемой со всей DOM размер, я думаю

Ответы [ 7 ]

5 голосов
/ 19 апреля 2010

: hover очень медленно работает в IE8, независимо от того, как вы собираетесь его реализовать. Фактически, события javascript onmouseover, onmouseout предоставляют гораздо более быстрые методы для создания эффекта наведения, чем CSS

Самый быстрый пример в IE8: 

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

Более медленный пример: 

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

ОЧЕНЬ медленный пример: 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>
4 голосов
/ 06 октября 2009

Кстати, для всех браузеров вы можете использовать: hover selector, используя только css. И только для IE6 вы можете добавить свой самый быстрый солутон.

1 голос
/ 06 октября 2009

Попробуйте использовать всплывающее событие. Добавьте событие hover только в таблицу, а затем посмотрите на целевой элемент. 

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});
0 голосов
/ 18 апреля 2013

Извините, что опубликовал ответ на этот старый вопрос, но я думаю, что он уместен, и эта страница хорошо оценена Google, так что ...

Ух ты, я просто потратил много времени на эту проблему, я пытался использовать Javascript, но это все еще было медленно.

Это решение, если вы используете фон images :

Это была настоящая проблема для меня, потому что проект, в котором у меня была эта проблема, был эффектом наведения на левую и правую кнопки / стрелки, которые я использую для анимации вкладок влево и вправо, вкладки будут переходить под кнопки, вкладка если можно сказать, слайд-шоу, и когда курсор войдет в область кнопок, нормальное изображение исчезнет, ​​изображение, показанное ниже, будет видимым в течение нескольких миллисекунд, а затем наведенное изображение в конечном итоге будет отображаться ужасно.

Реальное решение состояло в том, чтобы использовать спрайты изображений, таким образом, нет абсолютно никакой задержки даже в чистом CSS. Идея состоит в том, чтобы иметь одно изображение со всеми различными состояниями изображений внутри (обычное / зависание / выделенное / неактивное / и т. Д.), Установить изображение как background-image и просто настроить значение background-position для эффекта hover и др.

Если вы хотите узнать больше о спрайтах css: http://css -tricks.com / css-sprites /

0 голосов
/ 09 декабря 2009

Я столкнулся с этой проблемой и реализовал следующий обходной путь 

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

Надеюсь, это может быть полезно для вас.

0 голосов
/ 06 октября 2009

Мне кажется достаточно быстрым, даже не смотря на метрики.

Вы можете попробовать наведение мыши / мышью вместо переключения. Вы также можете попробовать делегирование событий, которое часто помогает с таким количеством элементов в dom. 

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });
0 голосов
/ 06 октября 2009

Вы пытались увидеть, что происходит, если у вас есть только один на строку? Любопытно, если это количество элементов в DOM [или в каждой строке] может повлиять на производительность. В противном случае это может быть связано с тем, как ie8 пересекает теги в механизме селектора. Не совсем ответ, но что-то попробовать.

Нет IE8, или я бы попробовал сам.

...