в jquery $(document).ready(function) или $(function), как я могу сделать то же самое без jquery, и мне нужно совместимость с браузером и разрешить присоединение более чем одной функции.
Javascript: как писать $(document). уже как событие без jquery
Ответ 1
Так jQuery обертывает функции, которые вы ищете - фрагмент не нуждается в jQuery и совместим с кросс-браузером. Я заменил все вызовы на jQuery.ready() с помощью yourcallback
- которые вам нужно определить.
Что здесь происходит:
- сначала определяется функция
DOMContentLoaded
, которая будет использоваться при возникновении события DOMContentLoaded - это гарантирует, что обратный вызов вызывается только один раз. - проверить, что документ уже загружен - если да, немедленно откройте обратный вызов.
- в противном случае обнюхивать функции (
document.addEventListener
/document.attachEvent
) и связывать обратные вызовы с ним (разные для IE и обычных браузеров, а также обратный вызов onload)
Поднятый из jQuery 1.4.3, функции bindReady() и DOMContentLoaded:
/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//jQuery.ready();
yourcallback();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
//jQuery.ready();
yourcallback();
}
};
}
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
// ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
setTimeout( yourcallback, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
window.addEventListener( "load", yourcallback, 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", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", yourcallback );
}
Это 51 строка чистого кода JavaScript, просто чтобы зарегистрировать событие надежно. Насколько мне известно, нет более простого метода. Идет, чтобы показать, что подходят обертки, такие как jQuery: они обертывают возможности нюхать и уродливые проблемы совместимости, чтобы вы могли сосредоточиться на чем-то еще.
Ответ 2
Самый маленький код DOMReady, когда-либо.
<html>
<head>
<script>
var ready = function (f) {
(/complete|loaded|interactive/.test(document.readyState)) ?
f() :
setTimeout(ready, 9, f);
};
</script>
</head>
<body>
<script>
ready(function () {
alert('DOM Ready!');
});
</script>
</body>
</html>
Ответ 3
Это все, что вам нужно, если вы поддерживаете IE9 + и современные (2013) версии Chrome, FF, Safari и т.д.
function ready(event) {
// your code here
console.log('The DOM is ready.', event);
// clean up event binding
window.removeEventListener('DOMContentLoaded', ready);
}
// bind to the load event
window.addEventListener('DOMContentLoaded', ready);
Ответ 4
Здесь используется метод, который работает надежно
function ready(func) {
var span = document.createElement('span');
var ms = 0;
setTimeout(function() {
try {
document.body.appendChild(span);
document.body.removeChild(span);
//Still here? Then document is ready
func();
} catch(e) {
//Whoops, document is not ready yet, try again...
setTimeout(arguments.callee, ms);
}
}, ms);
}
Довольно просто, он просто пытается добавить пустой элемент <span>
в document.body
. Если документ не "готов", будет выбрано исключение, и в этом случае он снова пытается выполнить новый вызов setTimeout
. После того как исключение не будет выбрано, оно вызывает функцию обратного вызова.
Я был бы рад услышать, есть ли какие-либо проблемы с этим методом. Это сработало хорошо для меня, но я не сделал обширного тестирования, которое было бы естественным для любой популярной структуры Javascript.
Ответ 5
Я видел много разных способов сделать это. Простейший способ (предположил yahoo изначально, я думаю) - просто вызвать вашу функцию инициализации после тега тега body, немного навязчивого, но это единственная строка.
Ответ 6
Изменить
Событие DomReady не существует nativly в javascript. Вы можете реализовать свои собственные, следуя замечательной работе таких людей, как Дин Эдвардс здесь и здесь с теми, на которых вы можете выполнить подобный процесс вложения событий в документе вместо окна.
Выясните user83421 ответ на Как добавить дополнительное событие window.onload в Javascript
Также напишите здесь.
if (window.addEventListener) // W3C standard
{
window.addEventListener('load', myFunction, false); // NB **not** 'onload'
}
else if (window.attachEvent) // Microsoft
{
window.attachEvent('onload', myFunction);
}
Ответ 7
У меня есть это после тега 'close body' и перед тегом 'close html'. и это работает очень хорошо. Функция пресетов загрузки присваивает значениям ширины, высоты и позиции значениям css div. полезно для разных размеров экрана.
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
loadPresets();
}
}