Событие триггера при загрузке тела js/jquery

Ответ 1

Все упомянули функцию ready (и ее ярлыки), но даже раньше этого можно просто поместить код в тег script непосредственно перед закрывающим тегом body (это то, что YUI и Google Closure люди рекомендуют), например:

<script type='text/javascript'>
pageLoad();
</script>
</body>

В этот момент все, что находится над этим тегом script, доступно в DOM.

Итак, ваши варианты в порядке появления:

• Самое раннее: вызов функции в теге script перед закрытием тега body. DOM готов к этому моменту (по словам пользователей Google Closure, и они должны знать, я также тестировал его в кучке браузеров).

• Раннее: обратный вызов jQuery.ready (и его формы быстрого доступа).

• Позднее, после всех элементов страницы, включая изображения, будут полностью загружены: window onload событие.

Вот живой пример: http://jsbin.com/icazi4, соответствующий экстракт:

</body>
<script type='text/javascript'>
  runPage();

  jQuery(function() {
    display("From <tt>jQuery.ready</tt> callback.");
  });

  $(window).load(function() {
    display("From <tt>window.onload</tt> callback.");
  });

  function runPage() {
    display("From function call at end of <tt>body</tt> tag.");
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
</script>

(Да, я мог бы использовать jQuery для функции display, но я начинал с шаблона без jQuery.)

Ответ 2

Когда страница полностью загружается (dom, images,...)

$(window).load(function(){
    // full load
});

При загрузке элементов DOM (не обязательно все изображения будут загружены)

$(function(){
    // DOM Ready
});

Затем вы можете вызвать любое событие

$("element").trigger("event");

Ответ 3

JQuery

$(function(){
  // your code...this will run when DOM is ready
});

Если вы хотите запустить свой код после загрузки всех ресурсов страницы, включая изображения/кадры/DOM, вам нужно использовать load событие:

$(window).load(function(){
  // your code...
});

JavaScript:

window.onload = function(){
  // your code...
};

Ответ 4

Функция windows.load полезна, если вы хотите что-то сделать, когда все загружено.

$(window).load(function(){
    // full load
});

Но вы также можете использовать функцию .load для любого другого элемента. Поэтому, если у вас есть одно очень крупное изображение, и вы хотите что-то сделать, когда это загружается, но остальная часть кода загрузки страницы при загрузке dom может сделать:

$(function(){
    // Dom loaded code

    $('#largeImage').load({
        // Image loaded code
    });
});

Также функция jquery.load в значительной степени похожа на обычную .onload.

Ответ 5

$(document).ready(function() {
    // do needed things
});

Это будет срабатывать, когда структура DOM будет готова.

Ответ 6

Не

  $(document).ready(function() {

  });

что вы ищете?

Ответ 7

$(document).ready( function() { YOUR CODE HERE } )

Ответ 8

Вы также можете use defer в теге script. Пока вы не укажете async, что, конечно же, не будет полезно для вашей цели.

Пример:

<script src="//other-domain.com/script.js" defer></script>
<script src="myscript.js" defer></script>

Как описано здесь:

В приведенном выше примере браузер загрузит оба сценария параллельно и выполнит их непосредственно перед запуском DOMContentLoaded, сохраняя их порядок.

[...] отложенные сценарии должны запускаться после анализа документа в том порядке, в котором они были добавлены [...]

Связанные обсуждения с использованием Stackoverflow: Как работает <script defer="defer">?

Ответ 9

Это вызовет функцию, когда структура DOM готова

$(document).ready(function () {
        userCommission();
        //Show commision box
        $('#userroles').change(function(){
           userCommission();
        });

        function userCommission() {
           var roles = $('#userroles').val();
           var result = roles.map(function (x) { 
                return parseInt(x, 10); 
            });
            var i = result.indexOf(6);           
            console.log(i);
            if(i == -1) {
                console.log('inside');
                $('.user-commission :input').attr("disabled", true);;
                $('#user-commission').hide();
            } 
        } });