一尘不染

$(document).ready 没有 jQuery 的等价物

javascript

我有一个使用 的脚本$(document).ready,但它不使用 jQuery 中的任何其他内容。我想通过删除 jQuery 依赖项来减轻它。

如何在$(document).ready不使用 jQuery 的情况下实现自己的功能?我知道使用window.onload会不一样,因为window.onload在加载所有图像、帧等之后会触发。


阅读 134

收藏
2022-02-09

共1个答案

一尘不染

有一个基于标准的替代品,DOMContentLoaded超过99% 的浏览器都支持,但 IE8 不支持:

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 );
}
2022-02-09