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

•  Печать 
• E-mail

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

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

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

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

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

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

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

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

//Убираем 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 тоже. Если вам будет интересно, то советую почитать ещё одну интересную статью по этой тематике Красивые эффекты наведения

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

Советуем почитать

Что такое АГС фильтр?	О чем написать статью? Список идей на черный день	Что такое анкор ссылки?
Пишем php парсер сайтов с нуля	Кейс: Продвижение сайта женской одежды с нуля до 10 000 человек в месяц	База dofollow сайтов для продвижения