Как подгрузить HTML-блок после загрузки JS-скрипта?

Question

[lebekons]

Есть код в html, который работает под управлением js-файла:

<script type="text/javascript" src="http://#"></script>
<div></div>

При загрузке страницы, html загружается раньше чем js. Из-за этого на странице появляется преждевременная информация которая описана в html-е. Надо сделать чтобы определенный кусок html подгружался исключительно после загрузки данного js. Если разместить js в тег head, то это не работает.
Нужно определить последовательность загрузки, сначала js, затем html-кусок, при чем чтобы остальной html подгружался как и раньше, синхронно.
Подскажите пожалуйста решение.

Answer 1

[Артем]

JS подгружается асинхронно, поэтому сначала html, а потом, по мере готовности - js.
Решение - сделать div display:none, а после загрузки js - показывать его.

Comments

[lebekons]

Это, я так понимаю, надо еще один js писать? и к нужному div делать style="display:none"?
Нельзя ли как-то попроще. Или я чего-то не понимаю?

[Артем]

К нужному диву применяете стиль visibility:hidden
Затем делаете так:

document.addEventListener('DOMContentLoaded', function(){
document.getElementById('id_вашего_div').style.visibility = 'visible';
});

в любом из ваших js-скриптов

[lebekons]

Артем: А если нет доступа к исходному коду js-скриптов? есть доступ только по ссылке.

[Артем]

То есть скрипт нельзя отредактировать? И нельзя залить новый? Тогда в виде расширения для браузера, например.

Answer 2

[WhatYouDoing]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="" id="js_container" style="display: none;">322</div>

<script type="text/javascript">
  $(function () {
    $('#js_container').text('777').show();
  });
</script>

Подправил # не хватало вот и не работало