CSS наведение

Оптимизация css hover за 5 секунд

Опубликовано: 02.02.2015 12:55
Просмотров: 1818

Очень часто метод :hover убивает производительность. Как его оптимизировать за пару секунд - читаем в этой статье.

Ускоряем свойство css :hover

Видимо я не совсем правильно выразился. Мы не оптимизируем само свойство, а находим способ ускорить и оптимизировать страницу при прокрутке.

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

 

Давайте уберём наведение при скроллинге с помощью вставки простейшего кода.

В стилях CSS таблиц создадим вот такой класс:

1
.disable-hover, .disable-hover * {pointer-events:none!important;}

С помощью него мы сможем убрать все эффекты наведения. Повесим же disablo-hover на главный наш тег, а именно на body. Привожу код на JS с использованием библиотеки JQuery (если захотите, то можете перевести его на обычный JS)

1
2
3
4
5
6
7
8
9
10
11
12
//Убираем hover
var timer;
window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!jQuery('body').hasClass('disable-hover')) {
    jQuery('body').addClass('disable-hover')
  }
  timer = setTimeout(function(){
    jQuery('body').removeClass('disable-hover')
  },500);
}, false);
/****/  

Данный код вызывается при срабатывании события scroll, которое в свою очередь проверяет, есть ли класс на body. И по таймауту снимает его, если требуется. Код довольно простой. Если возникнут вопросы - пишите их в комментариях.

На нашем блоге SEO-Love.ru данный скрипт помог существенно оптимизировать страницу на стареньких браузерах, да и на Chrome тоже. Если вам будет интересно, то советую почитать ещё одну интересную статью по этой тематике Красивые эффекты наведения

Надеюсь, что данная статья вам помогла. Отписывайтесь в комментариях, жду ваших вопросов и предложений! И до встречи!

  • Гость - Анастасия

    Блин, ни разу не задумывалась,что hover надо оптимизировать, спасибо огромное. Хотела тож на главной эффект при наведении в новом шаблоне сделать
    Кстати, немного не в тему вопрос - видела скрипт, который через Ajax отправляет комментариИ, без перезагрузки страницы. Имеет ли смысл ставит?

  • Да, конечно, вы можете поставить этот скрит с Ajax. C его помощью вы добьетесь того, что для оставления комментария не нужно будет тянуть с сервера целую страницу, а достаточно будет лишь обновить блок комментариев.

Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2000 Ограничение символов
Ваш текст должен быть в пределах 10-2000 символов
Ваш комментарий будет отправлен на модерацию