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

如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。


当前回答

三个选项:

如果script是主体的最后一个标记,则DOM将在脚本标记执行之前准备就绪当DOM就绪时,“readyState”将变为“complete”将所有内容置于“DOMContentLoaded”事件侦听器下

在准备状态更改时

  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

来源:MDN

DOMContentLoaded(DOM内容已加载)

document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

关注石器时代的浏览器:转到jQuery源代码并使用ready函数。在这种情况下,您不是在解析和执行整个库,您只是在做其中的一小部分。

其他回答

一旦DOM就绪,此跨浏览器代码将调用函数:

var domReady=function(func){
    var scriptText='('+func+')();';
    var scriptElement=document.createElement('script');
    scriptElement.innerText=scriptText;
    document.body.appendChild(scriptElement);
};

以下是它的工作原理:

domReady的第一行调用函数的toString方法,以获取传入函数的字符串表示形式,并将其包装在立即调用该函数的表达式中。domReady的其余部分使用表达式创建一个脚本元素,并将其附加到文档正文中。DOM就绪后,浏览器运行附加到主体的脚本标记。

例如,如果您这样做:domReady(function(){alert();});,以下内容将附加到body元素:

 <script>(function (){alert();})();</script>

注意,这只适用于用户定义的函数。以下命令不起作用:domReady(警报);

三个选项:

如果script是主体的最后一个标记,则DOM将在脚本标记执行之前准备就绪当DOM就绪时,“readyState”将变为“complete”将所有内容置于“DOMContentLoaded”事件侦听器下

在准备状态更改时

  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

来源:MDN

DOMContentLoaded(DOM内容已加载)

document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

关注石器时代的浏览器:转到jQuery源代码并使用ready函数。在这种情况下,您不是在解析和执行整个库,您只是在做其中的一小部分。

如果您不必支持非常旧的浏览器,即使在外部脚本加载了异步属性时,也可以使用以下方法:

HTMLDocument.prototype.ready = new Promise(function(resolve) {
   if(document.readyState != "loading")
      resolve();
   else
      document.addEventListener("DOMContentLoaded", function() {
         resolve();
      });
});

document.ready.then(function() {
   console.log("document.ready");
});

有一种基于标准的替代品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 );
}

现在是2020年,<script>标签具有defer属性。

例如:

<script src="demo_defer.js" defer></script>

它指定当页面完成解析时执行脚本。

https://www.w3schools.com/tags/att_script_defer.asp