jQuery hover и эффект fadeTo работают медленно в IE 8

Я разрабатывал свой веб-сайт как в Firefox, так и в IE 8. На главной странице (а также в разделах фотографий и рисунков) есть эффект наведения изображения. Вы можете увидеть исходный код по адресу http://www.dgendill.com. В Firefox эффект работает идеально. В IE 8 это работает, но намного медленнее. Вот что я пытался улучшить скорость:

  1. Использована оптимизированная библиотека jQuery.

  2. Сузили область, с которой jQuery проходит через DOM. Например:

    $(".sectionLink","#divLandingPage").hover(
    function(){
        $(this).addClass("hover");
        $(this).fadeTo(100,.8);
    },
    function(){
        $(this).removeClass("hover");
        $(this).fadeTo(100,.99);
    }
);

  3. Я попытался изменить тип отображения изображения. Блок отображения, встроенный блок и встроенный.

Любые идеи, почему IE 8 намного медленнее? Мой HTML действителен 4.01.

Вот парень, который работал с той же проблемой: http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

Я решил просто отключить эффект наведения в IE.

if(jQuery.support.opacity) {
    $(".sectionLink","#divLandingPage").hover(
        function(){
            $(this).addClass("hover");
            $(this).fadeTo(100,.8);
    },
        function(){
            $(this).removeClass("hover");
            $(this).fadeTo(100,.99);
    }
    );
}

jquery hover internet-explorer-8 fadeto
person user182666    schedule 08.12.2009    source источник
comment
Я не думаю, что это решение, но вам не нужно создавать событие window.load. Все, что вы делаете в этом событии, можно сделать в событии document.ready.   -  person Joel    schedule 08.12.2009
comment
Дополнительный вопрос: активируется ли document.load после завершения загрузки всех изображений? Кажется, я могу заставить это работать только тогда, когда я использовал window.load.   -  person user182666    schedule 08.12.2009
comment
Нашел разницу: 4loc.wordpress.com/2009/04/28 /documentready-vs-windowload Спасибо за подсказку, я переключусь либо на один, либо на другой   -  person user182666    schedule 08.12.2009
comment
IE8 и ниже имеют ужасную производительность JS, а также тот факт, что jQuery должен проделать немного больше работы, чтобы заставить работать непрозрачность. Это означает, что ваши анимации становятся медленными и дергаными. К сожалению, нет никакого реального способа обойти это   -  person Bojangles    schedule 04.08.2013

Ответы (2)


arrow_upward
0
arrow_downward 

    $(".sectionLink img").hover(function(){ 
        $(this).addClass("hover").fadeTo(100,.8);
    }, function(){ 
        $(this).removeClass("hover").fadeTo(100,.99); 
    });

Вы можете попробовать прикрепить обработчик событий прямо к изображению, или, если это не поможет, попробуйте метод анимации. Возможной причиной может быть то, что IE не поддерживает непрозрачность как свойство css.

Вы должны связать код между собой.

Событие load() срабатывает, когда контент загружается и отображается. Событие ready() срабатывает, когда документ готов к работе/манипулированию.

person Sveisvei    schedule 08.12.2009
comment
Спасибо за комментарий. Вы правы, это похоже на проблему непрозрачности. Я решил отключить эффект наведения в IE. В будущем я, вероятно, реализую эффект наведения только с помощью CSS. - person user182666; 09.12.2009

arrow_upward
0
arrow_downward

Я обнаружил, что эффекты анимации jQuery имеют проблемы во всех версиях IE, когда к элементу применяется атрибут CSS position. Обычно обертывание элемента в div без применения атрибута position решает проблему. Дополнительную информацию можно найти в jQuery slideToggle и Internet Explorer.

person ahsteele    schedule 08.12.2009