Форум Сайтостроение Веб-строительство

Lazy Load для блока комментариев Вконтакте

big boy
На сайте с 18.11.2006
Offline
332
big boy
2720

Комменты ВК очень сильно тормозят загрузку страницы. Ищу способ сунуть всё это дело в lazy load - загружать виджет только когда он появляется в поле зрения пользователя.

На данный момент нагуглил вот что:

1 - http://stackoverflow.com/questions/8192651/load-lazy-loading-a-div-whenever-the-div-gets-visible-for-the-first-time/10211585#10211585 - проблема в том, что у меня получилось запустить данный скрипт только со статикой.

2 - https://friendlybit.com/js/lazy-loading-asyncronous-javascript/ - написано красиво, а как адаптировать под мои нужды не понял.

Кто может подсказать правильное решение для моего случая? Думаю это будет полезно многим.

P.s. Виджет ВК вызывается следующим способом:

В хедер: 

	<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>

	<script type="text/javascript">

	  VK.init({apiId: 7777777, onlyWidgets: true});

	</script>

В место, где показывать комменты: 

<div id="vk_comments"></div>

<script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 15, width: "700", attach: "graffiti"});

</script>
✔ Как я генерирую статьи через ИИ, которые приносят трафик - https://webmasta.ru/blog/16-vkalyvayut-roboty-ne-chelovek-stati-s-pomoschyu-ii-kotorye-prinosyat-trafik
C
На сайте с 29.07.2014
Offline
8
Comodo
#1
1 - http://stackoverflow.com/questions/8...11585#10211585 - проблема в том, что у меня получилось запустить данный скрипт только со статикой.

Если я Вас правильно понял, то вот решение


$(document).ready(function(){
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $('#your_element').offset().top) {
            if(!$('#your_element').attr('loaded')) {
              
                $('#your_element').attr('loaded', true);

               
                VK.Widgets.Comments("your_element", {limit: 15, width: "700", attach: "graffiti"});
            }
        }
    });
});

Код взять из Вашего сабжа.

Рабочий пример jsfiddle

Проверить загрузку можно в консоли браузера. В примере запрос на подгрузку происходит только если блок комментов попадает в видимую часть страницы

Ускорить загрузку объявлений AdSense? Гугло-холокост: сайт вылетел из Нужна помощьсо скриптом
big boy
На сайте с 18.11.2006
Offline
332
big boy
#2

Comodo, вы мой спаситель!

А может подскажете еще один момент. Я хочу еще помимо комментариев ВК, так же и комменты сайта залейзилоадить.

Сейчас в шаблоне комменты выводятся одной строкой - <?php print $block->content ?>

Как её правильно сунуть в Ваш скрипт?

Работает ли закомментированный PHP Посоветуйте простой современный PHP Как получить protected свойство
C
На сайте с 29.07.2014
Offline
8
Comodo
#3

А они аяксом у Вас подгружаются? Если да, то просто этот аякс запрос надо пустить после 


VK.Widgets.Comments("your_element", {limit: 15, width: "700", attach: "graffiti"});

Если они выводятся статикой, то о загрузке чего именно идет речь? Если картинок, которые в комментах, то лучше подключить jquery плагин lazyload и не мучится уже.

Если не разберетесь, киньте урл в личку, с описанием. Постараюсь помочь

Закрытие внешних ссылок Спрашиваем и отвечаем по Резиновый сайт и разрешение

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий