Я унаследовал этот фрагмент кода, и он кажется субоптимальным и, возможно, неправильным, поскольку он добавляет прослушиватели событий как к окну, так и к объектам документа. Тем не менее, он работает правильно, за исключением ежевики 5.0. Может ли кто-нибудь объяснить, все ли это настроено правильно или есть какие-либо рекомендации, чтобы сделать его лучше и/или более упорядоченным?
if (document.readyState === "complete")
callback();
else if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded",callback,false);
window.addEventListener("load",callback,false);
}
else if(window.attachEvent)
{
document.attachEvent("onreadystatechange", callback);
window.attachEvent("onLoad",callback);
} else
setTimeout(callback,2000);
Если вы хотите знать, как это делается или посмотреть, как это сделать. Я рекомендую посмотреть работу Диего Перини. Его работа и методы используются во многих библиотеках DOM, включая jQuery. К сожалению, парень, похоже, не заслуживает особого внимания. Именно он стал первопроходцем метода опроса try/catch, что делает возможным использование событий, загружаемых в браузере, когда IE бросается в микс.
https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js
Если вы хотите использовать чистый javascript, вы можете использовать следующую кросс-браузерную функцию (источник (на русском языке): http://javascript.ru/unsorted/top-10-functions)
function bindReady(handler){
var called = false
function ready() {
if (called) return
called = true
handler()
}
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", function(){
ready()
}, false )
} else if ( document.attachEvent ) {
if ( document.documentElement.doScroll && window == window.top ) {
function tryScroll(){
if (called) return
if (!document.body) return
try {
document.documentElement.doScroll("left")
ready()
} catch(e) {
setTimeout(tryScroll, 0)
}
}
tryScroll()
}
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
ready()
}
})
}
if (window.addEventListener)
window.addEventListener('load', ready, false)
else if (window.attachEvent)
window.attachEvent('onload', ready)
/* else // use this 'else' statement for very old browsers :)
window.onload=ready
*/
}
readyList = []
function onReady(handler) {
if (!readyList.length) {
bindReady(function() {
for(var i=0; i<readyList.length; i++) {
readyList[i]()
}
})
}
readyList.push(handler)
}
Использование:
onReady(function() {
// ...
})
Лично я использовал бы jQuery для этого.
jQuery предназначен для обработки разнообразных вариантов использования браузера в состоянии готовности документа.
Используя jQuery, ваш код будет выглядеть так:
$(callback);