Задать вопрос
@darkersoul
web - программист
javascript

Как разместить в коде openapi.js от Вконтакте?

Подскажите, PS Insights ругается на файл openapi.js и с ним скорость работы сайта заметно снижается. Как правильно подключать сторонние библиотеки, чтобы не было сообщения "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы"?

prntscr.com/cgfkbc
  • Вопрос задан
  • 3167 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
@denisbookreev
В конец ставь подключение библиотек, вк оставь вверху
Ответ написан
1 комментарий
1 комментарий
@amorphine
Сделай загрузку скриптов от вк асинхронной.
defer
async
Ответ написан
1 комментарий
1 комментарий
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Сделать загрузку асинхронной:
<div id="vk_api_transport"></div>
<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ВАШ_APP_ID
    });
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "//vk.com/js/api/openapi.js";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

И разместить этот код в самом низу страницы.
Ответ написан
1 комментарий
1 комментарий
@darkersoul Автор вопроса
web - программист
Не работает. Uncaught ReferenceError: VK is not defined
1. 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>VK.Widgets.Like('vk_like', {type: 'button', height: 20});</script>
<div id="vk_api_transport"></div>
<script type="text/javascript">
    window.vkAsyncInit = function() {
        VK.init({
            apiId: 4127611
        });
    };

    setTimeout(function() {
        var el = document.createElement("script");
        el.type = "text/javascript";
        el.src = "//vk.com/js/api/openapi.js";
        el.async = true;
        document.getElementById("vk_api_transport").appendChild(el);
    }, 0);
</script>
</body>
</html>


2.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script defer async type="text/javascript" src="http://vk.com/js/api/openapi.js?105"></script>
    <script type='text/javascript'>VK.init({apiId: 4127611, onlyWidgets: true})</script>
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>VK.Widgets.Like('vk_like', {type: 'button', height: 20});</script>
</body>
</html>


3. И этот пример не работает. Во всех примерах библа подгружается позже чем идет вызов метода счетчика из нее! И все из-за defer! Но он нужен для ускорения загрузки контента!
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script defer type="text/javascript" src="http://vk.com/js/api/openapi.js?105"></script>
    <script type='text/javascript'>VK.init({apiId: 4127611, onlyWidgets: true})</script>
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>
    $(document).ready(function(){
        VK.Widgets.Like('vk_like', {type: 'button', height: 20});
    })
</script>
</body>
</html>
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Развернуть OpenSource софт на сервере
23 нояб. 2024, в 17:32
5000 руб./за проект
Отрисовать дизайн веб-страницы генерации математических примеров
23 нояб. 2024, в 16:00
10000 руб./за проект
Сделать бот программу для браузерной игры
23 нояб. 2024, в 15:17
5000 руб./за проект
Ещё заказы