Как отложить загрузку двух вставленных ВК постов на странице?

Question

[Андрей Филимонов]

Здравствуйте, внизу страницы вставлено 2 поста из ВК. Вставлены так:

<div class="col-lg-6 text-left">
<div id="vk_post_-206998906_533">&nbsp;</div>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
<script type="text/javascript">
  (function() {
    VK.Widgets.Post("vk_post_-206998906_533", -206998906, 533, 'DsVRe3o1nQ-Y7jbVx0xuHnnwvss');  
}());
</script>
</div>
<div class="col-lg-6 text-left">
<div id="vk_post_-206998906_534"></div>
<script type="text/javascript">
  (function() {
    VK.Widgets.Post("vk_post_-206998906_534", -206998906, 534, 'AimpCfLFhD2WjDrFGTERqeTD5Cg');
  }());
</script>
</div>

Как изменить код, чтобы загрузка стала отложенной?

Есть документ от ВК, но там про какой-то APP, не получилось применить.

Есть пример вставки Виджета сообщества, но у меня не сработало нормально с двумя постами, один криво отобразился.

Answer 1

[StiflerProger]

Самый простой способ, обернуть скрипт загрузки поста в таймер.

<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
<div class="col-lg-6 text-left">
    <div id="vk_post_-206998906_533">&nbsp;</div>
    <script type="text/javascript">
      setTimeout(() => {
        VK.Widgets.Post("vk_post_-206998906_533", -206998906, 533, 'DsVRe3o1nQ-Y7jbVx0xuHnnwvss');
      }, 0);
      
    </script>
  </div>

  <div class="col-lg-6 text-left">
    <div id="vk_post_-206998906_534"></div>
    <script type="text/javascript">
      setTimeout(() => {
        VK.Widgets.Post("vk_post_-206998906_534", -206998906, 534, 'AimpCfLFhD2WjDrFGTERqeTD5Cg');
      }, 5000);

    </script>
  </div>

Comments

[Андрей Филимонов]

Спасибо)
Возможно ли отложить и загрузку https://vk.com/js/api/openapi.js?169 ?

[StiflerProger]

Андрей Филимонов, да можно использовать динамический импорт

[StiflerProger]

StiflerProger, хотя не, тут для загрузки нужно сделать так, как в документации написано

[StiflerProger]

Андрей Филимонов,

<div id="vk_api_transport"></div>
<script type="text/javascript">
  // эта функция выполнится когда загрузится скрипт VK
  window.vkAsyncInit = function() {
    VK.init({
      apiId: 'asd'
    });

    // загрузка первого поста
    VK.Widgets.Post("vk_post_-206998906_533", -206998906, 533, 'DsVRe3o1nQ-Y7jbVx0xuHnnwvss');

    // через 3 секунды загрузка второго поста
    setTimeout(() => {
      VK.Widgets.Post("vk_post_-206998906_534", -206998906, 534, 'AimpCfLFhD2WjDrFGTERqeTD5Cg');
    }, 3000);
  };

  // добавляем скрипта на страницу только через 3 секунды после загрузки страницы
  setTimeout(() => {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?169";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 3000);

</script>

<div class="col-lg-6 text-left">
  <div id="vk_post_-206998906_533">&nbsp;</div>
</div>

<div class="col-lg-6 text-left">
  <div id="vk_post_-206998906_534"></div>
</div>

[Андрей Филимонов]

StiflerProger, спасибо, но в этом случае дублируются посты и вылезают за стили:

[StiflerProger]

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

[Андрей Филимонов]

StiflerProger, я вас уверяю, удалил старый код, вставил новый и посты дублируются. Сейчас повторил, сделал скриншоты кода до и после: