Дополнительно
Чистый JavaScript-эквивалент jQuery's $.ready() - как вызвать функцию, когда страница/DOM готова к этому
Ладно, возможно, это просто глупый вопрос, хотя я уверен, что множество других людей время от времени задают такой же вопрос. Я просто хочу быть уверенным на 100% в любом случае. С jQuery мы все знаем замечательную
$('document').ready(function(){});
Однако, допустим, я хочу запустить функцию, написанную на стандартном JavaScript без какой-либо библиотеки, и что я хочу запустить функцию, как только страница будет готова ее обработать. Как правильно к этому подойти?
Я знаю, что я могу сделать:
window.onload="myFunction()";
...или я могу использовать тег body
:
<body onload="myFunction()">
...или я могу даже попробовать внизу страницы после всего, но в конце body
или html
тега, например:
<script type="text/javascript">
myFunction();
</script>
Каков кроссбраузерный (старый/новый) совместимый метод выдачи одной или нескольких функций подобно jQuery's $.ready()
?
1231
10
Самое простое, что можно сделать в отсутствие фреймворка, который делает всю кроссбраузерную совместимость за вас, это просто поместить вызов вашего кода в конец тела. Это выполняется быстрее, чем обработчик
onload
, потому что он ждет только готовности DOM, а не загрузки всех изображений. И это работает в любом браузере.Для современных браузеров (начиная с IE9 и новее и любой версии Chrome, Firefox или Safari), если вы хотите иметь возможность реализовать метод jQuery типа
$(document).ready()
, который вы можете вызвать из любого места (не беспокоясь о том, где расположен вызывающий скрипт), вы можете просто использовать что-то вроде этого:Использование:
Если вам нужна полная кросс-браузерная совместимость (включая старые версии IE) и вы не хотите ждать
window.onload
, то вам, вероятно, стоит посмотреть, как фреймворк вроде jQuery реализует свой метод$(document).ready()
. Это довольно сложно, в зависимости от возможностей браузера.Чтобы дать вам небольшое представление о том, что делает jQuery (это будет работать везде, где размещен тег script).
Если поддерживается, он пробует стандартный метод:
с отступлением на:
или для старых версий IE используется:
с возможностью возврата к:
И, есть некоторые обходные пути в коде IE, которые я не совсем понимаю, но похоже, что это как-то связано с фреймами.
Вот полная замена jQuery's
.ready()
, написанная на обычном javascript:Последняя версия кода находится в открытом доступе на GitHub по адресу https://github.com/jfriend00/docReady.
Использование:
Это было протестировано в:
Рабочая реализация и тестовый стенд: http://jsfiddle.net/jfriend00/YfD3C/
Вот краткое описание того, как это работает:
docReady(fn, context)
.docReady(fn, context)
, проверяем, сработал ли уже обработчик готовности. Если да, просто запланируйте новый добавленный обратный вызов сразу после завершения этого потока JS с помощьюsetTimeout(fn, 1)
.document.addEventListener
существует, то установите обработчики событий с помощью.addEventListener()
для событий"DOMContentLoaded"
и"load"
. Событие "load" является резервным событием для безопасности и не должно быть необходимым.document.addEventListener
не существует, то установите обработчики событий с помощью.attachEvent()
для событий"onreadystatechange"
и"onload"
.onreadystatechange
проверьте, является лиdocument.readyState === "complete"
и если да, вызовите функцию для запуска всех обработчиков готовности.Обработчики, зарегистрированные с помощью
docReady()
, гарантированно будут запущены в том порядке, в котором они были зарегистрированы.Если вы вызываете
docReady(fn)
после того, как документ уже готов, обратный вызов будет запланирован на выполнение, как только текущий поток выполнения завершится с помощьюsetTimeout(fn, 1)
. Это позволяет вызывающему коду всегда считать, что это асинхронные обратные вызовы, которые будут вызваны позже, даже если позже - это как только завершится текущий поток JS, и сохраняет порядок вызовов.Я хотел бы упомянуть некоторые из возможных путей здесь вместе с чистого JavaScript трюк, который работает во всех браузерах:
Хитрость здесь, как пояснил автор, заключается в том, что мы проверяем, документ.в свойстве readyState собственность. Если он содержит строку
в
(как вне инициализирована
изагрузки
, первые два дом готов Штатов из 5) мы устанавливаем таймаут и снова проверить. В противном случае, мы выполняем переданную функцию.И здесь'ы [jsFiddle][3] для трюк, который работает во всех браузерах.
Спасибо Tutorialzine для включения в свою книгу.
Если вы делаете ваниль обычная язык JavaScript без jQuery, то вы должны использовать (интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;9 или более поздней версии):
Выше эквивалент в jQuery
.готов
:Которые также могут быть написаны сокращенное такой, что jQuery будет работать после готов даже возникает.
Не путать с ниже (которая не претендует на дом готовы):
Не используйте жизнь такой, что имеет самостоятельного выполнения:
Эта жизнь не будет ждать для Ваш дом, чтобы загрузить. (Я'м даже не говорю о последней версии браузера Хром!)
Испытания в IE9, и последний Firefox и Chrome, а также поддерживается в IE8.
Пример: http://jsfiddle.net/electricvisions/Jacck/
Обновление - многоразовые версия
Я просто развил следующее. Это'ы довольно упрощенный эквивалент в jQuery или дом готов без обратной совместимости. Он, вероятно, нуждается в дальнейшей доработке. Тестирование в последних версиях Chrome, Firefox и IE (10/11) и должны работать в старых браузерах, как прокомментировал. Я'будете обновлять, если я найду какие-либо вопросы.
Использование:
Это's написано для обработки асинхронной загрузки JS, но вы, возможно, захотите синхронизация загрузите этот скрипт, если вы не'вновь сокращение. Я'вэ нашел его полезным в развитии.
Современные браузеры также поддерживают асинхронной загрузкой скриптов, которые еще больше усиливает впечатление. Поддержка асинхронных помощью нескольких скриптов можно загрузить одновременно все то же время отрисовки страницы. Просто следите, когда в зависимости от другие скрипты загружаются асинхронно или использовать английское сокращение Cups или что-то вроде browserify, чтобы справиться с зависимостями.
Хорошие люди в HubSpot есть ресурс, где можно найти чисто методологии JavaScript для достижения много jQuery и добра - в том числе и "готово"
http://youmightnotneedjquery.com/#ready
пример рядный использование:
Я'м не совсем уверен, что вы'повторно просить, но, может быть, это может помочь:
Или:
Ваш метод (размещение скрипта перед закрывающим тегом body)
это надежный способ поддержки старых и новых браузеров.
Готов
Использовать как
Для самостоятельного вызова код
Поддержка: в IE9+
Здесь'ы очищенную, номера-ивал-через версия ОЗУ-Сваруп'С, что "работает во всех браузерах, что" Выбор-работает во всех браузерах!
Это, однако, подождать лишние 10 мс для запуска, так вот's более сложный путь, который должен'т:
Смотрите также https://stackoverflow.com/questions/8100576/how-to-check-if-dom-is-ready-without-a-framework.
document.ondomcontentready=function(){}
должен сделать трюк, но он не имеет полной совместимости с браузерами.Похоже, что вам следует просто использовать jQuery min