Что такое эквивалент не-jQuery $(document).ready()
?
Хорошая вещь о $(document).ready()
заключается в том, что она срабатывает перед window.onload
. Функция загрузки ожидает, пока все будет загружено, включая внешние активы и изображения. $(document).ready
, однако, срабатывает, когда дерево DOM завершено и может быть обработано. Если вы хотите получить DOM ready, без jQuery, вы можете зарегистрироваться в этой библиотеке. Кто-то извлек только часть ready
из jQuery. Его приятно и мало, и вам может показаться полезным:
Это отлично работает, от ECMA
document.addEventListener("DOMContentLoaded", function() {
// code...
});
window.onload
не равен JQuery $(document).ready
потому что $(document).ready
ожидает только дерево DOM, в то время как window.onload
проверяет все элементы, включая внешние ресурсы и изображения.
РЕДАКТИРОВАТЬ: Добавлен IE8 и более старый эквивалент, благодаря наблюдению Яна Дерка. Вы можете прочитать исходный код этого кода на MDN по этой ссылке:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
Есть и другие варианты, кроме "interactive"
. Смотрите MDN ссылку для деталей.
Немного, что я собрал
domready.js
(function(exports, d) {
function domReady(fn, context) {
function onReady(event) {
d.removeEventListener("DOMContentLoaded", onReady);
fn.call(context || exports, event);
}
function onReadyIe(event) {
if (d.readyState === "complete") {
d.detachEvent("onreadystatechange", onReadyIe);
fn.call(context || exports, event);
}
}
d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe);
}
exports.domReady = domReady;
})(window, document);
Как использовать его
<script src="domready.js"></script>
<script>
domReady(function(event) {
alert("dom is ready!");
});
</script>
Вы также можете изменить контекст, в котором выполняется обратный вызов, передав второй аргумент
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
Существует замена на основе стандартов DOMContentLoaded, которая поддерживается более чем 90% + браузеров, но не IE8 (так что ниже кода используется JQuery для поддержки браузера):
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
Настраиваемая функция jQuery намного сложнее, чем просто window.onload, как показано ниже.
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
DOMContentLoaded
и load
события, используя addEventListener
, и сначала они удаляют оба слушателя, поэтому он не addEventListener
два раза.
Согласно http://youmightnotneedjquery.com/#ready хорошей заменой, которая все еще работает с IE8, является
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
}
// test
window.ready(function() {
alert('it works');
});
Лично я бы также проверил, является ли тип fn
функцией.
Причина, по которой я отвечаю на этот вопрос поздно, заключается в том, что я искал этот ответ, но не смог найти его здесь. И я думаю, что это лучшее решение.
Теперь, когда это 2018 год, здесь быстрый и простой способ.
Это добавит прослушиватель событий, но если он уже запущен, мы проверим, находится ли dom в состоянии готовности или что он завершен. Это может произойти до или после завершения загрузки подресурсов (изображений, таблиц стилей, фреймов и т.д.).
function domReady(fn) {
// If we're early to the party
document.addEventListener("DOMContentLoaded", fn);
// If late; I mean on time.
if (document.readyState === "interactive" || document.readyState === "complete" ) {
fn();
}
}
domReady(() => console.log("DOM is ready, come and get it!"));
Вот несколько быстрых помощников, использующих стандарт ES6 Import & Export, которые я написал, в том числе и TypeScript. Может быть, я смогу сделать из них быструю библиотеку, которая может быть установлена в проекты как зависимость.
export const domReady = (callBack) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
export const domReady = (callBack: () => void) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack: () => void) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
export const domReady = new Promise(resolve => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', resolve);
}
else {
resolve();
}
});
export const windowReady = new Promise(resolve => {
if (document.readyState === 'complete') {
resolve();
}
else {
window.addEventListener('load', resolve);
}
});
В простом ванильном JavaScript без библиотек? Это ошибка. $
является просто идентификатором и undefined, если вы его не определите.
jQuery определяет $
как свой собственный "все объект" (также известный как jQuery
, поэтому вы можете использовать его, не противоречая другим библиотекам). Если вы не используете jQuery (или какую-то другую библиотеку, которая его определяет), то $
не будет определен.
Или вы спрашиваете, что эквивалент в простом JavaScript? В этом случае вы, вероятно, хотите window.onload
, что не совсем эквивалентно, но это самый быстрый и простой способ приблизиться к тот же эффект в ванильном JavaScript.
Самый простой способ в последних браузерах - использовать соответствующие GlobalEventHandlers, onDOMContentLoaded, onload, onloadeddata (...)
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()
Событие DOMContentLoaded запускается, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь, пока закончится загрузка таблиц стилей, изображений и подкадров. Очень различную нагрузку на события следует использовать только для обнаружения полностью загруженной страницы. Это невероятно популярная ошибка в использовании нагрузки, где DOMContentLoaded будет гораздо более уместным, поэтому будьте осторожны.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Используемая функция - это IIFE, очень полезная в этом случае, поскольку она срабатывает при готовности:
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
Очевидно, что более целесообразно разместить его в конце любых скриптов.
В ES6 мы также можем записать его как функцию стрелки:
onload = (() => { console.log("ES6 page fully loaded!") })()
Лучше всего использовать элементы DOM, мы можем дождаться, когда будет готова какая-либо переменная, которая запускает стрелочный IIFE.
Поведение будет таким же, но с меньшим воздействием памяти.
footer = (() => { console.log("Footer loaded!") })()
<div id="footer">
Во многих случаях объект документа также запускается при готовности, по крайней мере, в моем браузере. Синтаксис тогда очень приятный, но ему нужны дополнительные проверки совместимости.
document=(()=>{ /*Ready*/ })()
Тело onLoad также может быть альтернативой:
<html>
<head><title>Body onLoad Exmaple</title>
<script type="text/javascript">
function window_onload() {
//do something
}
</script>
</head>
<body onLoad="window_onload()">
</body>
</html>
Я не думаю, что JavaScript имеет встроенную функцию. Это специфичный jQuery.
$(document).ready()
без использования какой-либо библиотеки, посмотрите на это: stackoverflow.com/questions/1795089/…$(document).ready()
- books.google.com/… . Он также используетaddEvent
привязки событияaddEvent
написанную Дином Эдвардсом, код которого также есть в книге :)