Загрузка комментариев Вконтакте (VK) при скролле на WordPress

Загрузка комментариев Вконтакте (VK) при скролле на WordPress

· WordPress · 2 мин чтения

Сегодня всех беспокоит скорость загрузки сайта и это не просто так, потому что после установки 4-5 плагинов/виджетов, сайт начинает замедляться. Все конечно же зависит от плагинов и как они написаны, но все же это факт. В этой записи, я расскажу вам как не подгружать виджет комментариев от контакта не сразу при загрузке странице, а только после того, как пользователь спустился в самый низ записи.

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

 Что нам нужно сделать?

  1. Сделать загрузку комментариев только в том случае, если пользователь спустился в самый низ сайта.
  2. Убрать повторное добавление блока комментариев, если пользователь поднялся вверх сайта и спустился снова вниз.

Вроде бы план понятен. Приступаем!

Как нам решить эти задачи?

  1. Получим высоту записи и минуснем с неё где-то 500-600 пикселей, чтобы пока пользователь спускался вниз, комментарии успели подгрузится.
  2. Создать «булевое» значение для хранения информации о подгруженных комментариях. И если комментарии уже подгрузились, то некоторая часть кода уже не будет работать и тем самым не дублируя блок комментариев.

Приступим

Если вы зайдете на прошлую запись и под заголовком «Добавляем код виджета VK» найдете следующий код (который мы добавили в comments.php.):

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
</script>

Вот именно он нам сейчас и понадобится.

  • Зайдите в comments.php и найдите этот участок кода.
  • После того как нашли, замените все что там есть на код ниже:
jQuery(function($) {
  var vkShowed = false;
  $(window).on('scroll', function() {
    if( $(window).scrollTop() >= ($('article.post').outerHeight() - 500) && !vkShowed ) {
      VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
      vkShowed = true;
    }
  });
});

Что делает эта часть кода? 

Я сейчас все объясню. Без паники!

Для начала, я объявляю то, что я хочу использовать jQuery и обозначать его как $ в дальнейшем (первая строка).

На второй строке, я создаю булевую переменную «vkShowed», которая изначально равна «false».

На третей строке, я использую метод on() для того, чтобы ловить событие «scroll», которое отвечает за получение информации о сколле пользователя.

На четвертой строке, я делаю условие которые звучит следующим образом: текущая высоту от верхушки сайта ($(window).scrollTop()) больше или равна (>=) высоте поста минус 500 пикселей ($('article.post').outerHeight() - 500) и если vkShowed не равно «true», тогда в этом случае начинают подгружаться комментарии.

!vkShowed — означает, что комментарии ВК еще не были показаны и их можно отобразить. Второй раз этот if больше не сработает.

В чем плюсы этого способа?

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

Откуда вы можете знать понадобится человеку комментарии или нет? Зачем ему грузить комментарии и ждать еще около половины секунды?

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

На моей блоге подгрузка комментарием работает именно таким способом.Спуститесь в самый них, чтобы посмотреть живое демо.

Источники

 

 

Комментарии