非jquery的$(document).ready()等价于什么?
当前回答
这没有回答问题,也没有显示任何非jquery代码。请看下面@ sospedra的回答。
$(document).ready()的优点是它在window.onload之前触发。load函数等待加载所有内容,包括外部资产和图像。美元(文档)。但是,当DOM树完成并且可以操作时,ready将被触发。如果你想在没有jQuery的情况下实现DOM,你可以查看这个库。有人从jQuery中提取了现成的部分。它又小又漂亮,你可能会发现它很有用:
domready at谷歌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);
如何使用
<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);
在普通的JavaScript中,没有库?这是一个错误。$只是一个标识符,除非您定义它,否则它是没有定义的。
jQuery将$定义为它自己的“everything对象”(也称为jQuery,因此您可以在不与其他库冲突的情况下使用它)。如果你没有使用jQuery(或其他定义它的库),那么$将不会被定义。
或者你是在问在纯JavaScript中有什么等价的东西吗?这样的话,你可能需要window。onload并不是完全等价的,但它是在普通JavaScript中接近相同效果的最快最简单的方法。
有一个基于标准的替换
超过90%以上的浏览器支持DOMContentLoaded,但不是 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 );
}
这没有回答问题,也没有显示任何非jquery代码。请看下面@ sospedra的回答。
$(document).ready()的优点是它在window.onload之前触发。load函数等待加载所有内容,包括外部资产和图像。美元(文档)。但是,当DOM树完成并且可以操作时,ready将被触发。如果你想在没有jQuery的情况下实现DOM,你可以查看这个库。有人从jQuery中提取了现成的部分。它又小又漂亮,你可能会发现它很有用:
domready at谷歌Code
这从ECMA完美地工作。这段代码是您所需要的全部内容,但如果您想挖掘更多内容并探索其他选项,请查看这段详细的解释。
document.addEventListener("DOMContentLoaded", function() {
// code...
});
窗外。onload不等于JQuery $(document)。因为$(document)。ready只等待DOM树while窗口。Onload检查所有元素,包括外部资产和图像。
编辑:由于Jan Derk的观察,添加了IE8和更老的版本。您可以在MDN上阅读此代码的源代码:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
除了“互动性”,还有其他选择。详见MDN文档。