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

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

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

prntscr.com/cgfkbc
  • Вопрос задан
  • 3119 просмотров
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать дизайн мобильного приложения Гороскоп
28 апр. 2024, в 18:14
2500 руб./за проект
Сайт с видеозвонками и чатами на react
28 апр. 2024, в 18:08
10000 руб./за проект
Дизайн визитки для сервисного центра
28 апр. 2024, в 18:05
1000 руб./за проект
Ещё заказы