Положение JS в коде — как сделать, чтобы скрипт выполнялся?

Question

[Alexander Lashchevsky]

Здравствуйте!

Существуют такие JS/jQuery скрипты, выполнение которых происходит только в том случае, если они находятся ПОСЛЕ блока, с которым им приходится работать.

Пример:
Есть скрипт, который дублирует содержимое diva #from в div #to. Однако происходит это дублирование только в том случае, если скрипт располагается после блока #to.

Это неудобно. Я хочу, чтобы все используемые скрипты были в , а не разбросаны по коду.

Вопрос:
Как сделать так, что выполнялось действие скрипта в вышеописанных условиях?

С уважением,
Александр.

Answer 1

[Юрий Лобанов]

Во-первых, нет ничего страшного в том, чтобы скрипты вставлять перед закрывающим тегом body.
Во-вторых, прочтите jquery-docs.ru/events/ready

Answer 2

[Дмитрий С]

$( 'document' ).ready(function() {
    // выполняется, когда документ загружен
});

Comments

[Юрий Лобанов]

$( document ).ready(function() {
    // выполняется, когда документ загружен
});

[Александр Петров]

$(function() {
  //ну или так 
});

Answer 3

[Евгений Попов]

Если в #from загружается содержание асинхронно, то в данном случае необходим callback на событие когда данные туда загружены. Если содержание загружается синхронно, вместе с загрузкой страницы, то действительно как писали выше, подойдет событие ready или просто размещение скрипта перед </body>

Answer 4

[Sergey Litvinchuk]

Можно сделать список задач

window.tasks= {
 list: [],
 add: function(f) {
  this.list.push(f);
 },
 run: function() {
  this.list.forEach(function (f) {  f(); });
 }
}

Потом в нужном месте делать то, что требуется

<div id="d1"></div>
<div id="d2"></div>
<script>
tasks.add(function() {
 // some action
 alert('hello 1');
});
</script>

<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<script>
tasks.add(function() {
 // some action
 alert('hello 1');
});
</script>

<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>

А в конце страници выполнять все
<script> tasks.run(); </script>