Сегодня всех беспокоит скорость загрузки сайта и это не просто так, потому что после установки 4-5 плагинов/виджетов, сайт начинает замедляться. Все конечно же зависит от плагинов и как они написаны, но все же это факт. В этой записи, я расскажу вам как не подгружать виджет комментариев от контакта не сразу при загрузке странице, а только после того, как пользователь спустился в самый низ записи.
Если у вас не установлен виджет комментариев от вк на вашем WordPress сайта, то сначала советую это сделать с помощью этой записи. Все что будет описывать ниже в текущей записи, будет частично взято с прошлой записи.
Что нам нужно сделать?
- Сделать загрузку комментариев только в том случае, если пользователь спустился в самый низ сайта.
- Убрать повторное добавление блока комментариев, если пользователь поднялся вверх сайта и спустился снова вниз.
Вроде бы план понятен. Приступаем!
Как нам решить эти задачи?
- Получим высоту записи и минуснем с неё где-то 500-600 пикселей, чтобы пока пользователь спускался вниз, комментарии успели подгрузится.
- Создать «булевое» значение для хранения информации о подгруженных комментариях. И если комментарии уже подгрузились, то некоторая часть кода уже не будет работать и тем самым не дублируя блок комментариев.
Приступим
Если вы зайдете на прошлую запись и под заголовком «Добавляем код виджета 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 больше не сработает.
В чем плюсы этого способа?
Я могу выделить лишь один плюс этого способ: изначальная скорость загрузки вашего сайта увеличится.
Откуда вы можете знать понадобится человеку комментарии или нет? Зачем ему грузить комментарии и ждать еще около половины секунды?
Лучше всего, изначально оставить комментарии скрытыми и если пользователю они понадобятся — просто подгрузить их и все.
На моей блоге подгрузка комментарием работает именно таким способом.Спуститесь в самый них, чтобы посмотреть живое демо.
Источники
- метод .on() — http://api.jquery.com/on/
