Как сделать код jquery ПОСЛЕ загрузки страницы?

88

Если вы хотите, чтобы событие работало на вашей странице, вы должны вызвать его внутри функции $ (document) .ready (). Все внутри него загрузится, как только будет загружена модель DOM и до того, как будет загружено содержимое страницы.

Я хочу создать код javascript только после загрузки содержимого страницы, как я могу это сделать?

Alex
источник

Ответы:

174

Используйте loadвместо ready:

$(document).load(function () {
 // code here
});

Обновление, которое необходимо использовать .on()с jQuery 1.8. ( http://api.jquery.com/on/ )

$(window).on('load', function() {
 // code here
});

Из этого ответа :

Согласно http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ :

Удалены устаревшие псевдонимы событий

.load, .unload, Не и .error, устаревший с JQuery 1.8, не более. Используйте .on()для регистрации слушателей.

https://github.com/jquery/jquery/issues/2286

Мэтт
источник
1
Из комментария к этому ответу: stackoverflow.com/a/37817516/957246 $ (window) .on ("load", function () {// здесь код}); ..потому что ".load" устарел.
trapper_hag
используя .on (), это так очевидно ... но я потратил 1 час, бьясь головой о стену, прежде чем нашел это ... спасибо ...!
ghuroo
3
Остерегайтесь ошибки, пытаясь $(document).on('load', ...это сделать,$(window).on('load',...
Пользователь
29

Следующий

$(document).ready(function() { 
});

можно заменить

$(window).bind("load", function() { 
     // insert your code here 
});

Есть еще один способ, который я использую, чтобы увеличить время загрузки страницы.

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});
Кшитиз
источник
2
обработчик нагрузки в готовом обработчике? Это безумие. Вам не нужен готовый документ, поскольку в этот момент окно действительно существует, и вы можете прикрепить обработчик без него.
dalore
20

никто не упомянул об этом

$(function() {
    // place your code
});

что является сокращенной функцией

$(document).ready(function() { .. });
Золтан Сюле
источник
16

Изменить: этот код будет ждать, пока весь контент (изображения и сценарии) полностью загрузится и отобразится в браузере.

У меня была эта проблема, когда $(window).on('load',function(){ ... })мой код запускался слишком быстро, так как Javascript я использовал, предназначался для целей форматирования и скрытия элементов. Элементы были скрыты слишком рано и оставлены с высотой 0.

Я сейчас использую, $(window).on('pageshow',function(){ //code here });и он срабатывает в нужное мне время.

Бойд Сир
источник
1
Этот мне тоже помог, я как раз хотел запустить какой-то код после отображения страницы jQuery Mobile. Спасибо. @Boyd Cyr
codedudey
Просто хотел добавить, насколько этот код более полезен по сравнению с принятым ответом. Большое спасибо.
Countzero
10

Таким образом можно избежать неопределенности в '$'

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

РЕДАКТИРОВАТЬ: использование DOMContentLoaded быстрее, чем просто загрузка, потому что страница ожидания загрузки полностью загружена, imgs включены ... в то время как DomContentLoaded ждет только структуру

Диего Винисиус
источник
8

Я ищу ту же проблему, и вот что мне помогает. Вот версия jQuery 3.1.0, и событие загрузки устарело для использования, начиная с версии jQuery 1.8 . Событие загрузки удалено из jQuery 3.0. Вместо этого вы можете использовать метод on и привязать событие загрузки JavaScript:

$(window).on('load', function () {
  alert("Window Loaded");
});
Анкит Сутар
источник
5

напишите внутри него код, который вы хотите выполнить. Когда ваш документ будет готов, он будет выполнен.

$(document).ready(function() { 

});
Марк-Андре Дено
источник