什么是非jQuery相当于$(document).ready()？
这非常适合ECMA
document.addEventListener("DOMContentLoaded", function() {
// code...
});
在window.onload不等于JQuery的$(document).ready,因为$(document).ready等待只对DOM树,同时window.onload检查,包括对外资产和图像的所有元素.
编辑:由于Jan Derk的观察,添加了IE8和更旧的等价物.您可以在此链接上阅读MDN 上此代码的来源:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
还有其他选择"interactive".有关详细信息,请参阅MDN链接.
好消息$(document).ready()是它之前发射过window.onload.加载功能等待所有内容加载,包括外部资源和图像.$(document).ready但是,当DOM树完成并可以操作时会触发.如果你想准备好DOM,没有jQuery,你可以检查这个库.有人ready从jQuery中提取了部分内容.它很好很小,你可能会发现它很有用:
已完全使用Google Code
我放在一起的小东西
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);
如何使用它
您还可以通过传递第二个参数来更改回调运行的上下文
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
现在到了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!"));有一个基于标准的替换,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 );
}
根据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');
});在普通的JavaScript中,没有库？这是一个错误.$只是一个标识符,除非您定义它,否则它是未定义的.
jQuery定义$了它自己的"所有对象"(也称为jQuery可以使用它而不与其他库冲突).如果您不使用jQuery(或其他定义它的库),则$不会定义.
或者你在问普通JavaScript中的等价物是什么？在这种情况下,您可能想要window.onload,这不是完全等效的,但是在vanilla JavaScript中接近相同效果的最快捷,最简单的方法.
在最近的浏览器中，最简单的方法是使用适当的GlobalEventHandlers，onDOMContentLoaded，onload，onloadeddata（...）
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()
京公网安备 11010802040832号 | 京ICP备19059560号-6 