$（document）.ready等同物，不带jQuery

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

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

当前回答

大多数普通的JS Ready函数都不考虑在文档加载后设置DOMContentLoaded处理程序的情况——这意味着函数永远不会运行。如果在异步外部脚本（<script async src=“file.js”></script>）中查找DOMContentLoaded，则可能会发生这种情况。

只有当文档的readyState尚未交互或完成时，下面的代码才会检查DOMContentLoaded。

var DOMReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
  //DOM ready!
});

如果您也想支持IE：

var DOMReady = function(callback) {
    if (document.readyState === "interactive" || document.readyState === "complete") {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback());
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading') {
                callback();
            }
        });
    }
};

DOMReady(function() {
  // DOM ready!
});

2019-04-12 10:32:41

其他回答

简而言之，我们可以使用JavaScript方法来代替jQuery中使用的$（document）.ready（）：

<script>
    document.addEventListener("DOMContentLoaded", function_name, false);
    function function_name(){
        statements;
    }
</script>

因此，当页面准备就绪（即DOMContentLoaded）时，将调用函数function_name（）。

2016-01-12 16:35:38

试试看：

function ready(callback){
    if(typeof callback === "function"){
        document.addEventListener("DOMContentLoaded", callback);
        window.addEventListener("load", callback);
    }else{
        throw new Error("Sorry, I can not run this!");
    }
}
ready(function(){
    console.log("It worked!");
});

2018-05-27 16:11:24

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

2009-04-28 21:59:53

现在你应该使用模块。将代码放入模块的默认函数中，并将该函数导入脚本元素。

客户端.js：

export default function ()
{
  alert ("test");
}

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <script type="module">
      import main from './client.js';
      main ();
    </script>
  </body>
</html>

2020-11-21 17:57:13

这是我使用的，它很快，涵盖了我认为的所有基础；适用于除IE<9以外的所有情况。

(() => { function fn() {
    // "On document ready" commands:
    console.log(document.readyState);
};  
  if (document.readyState != 'loading') {fn()}
  else {document.addEventListener('DOMContentLoaded', fn)}
})();

这似乎适用于所有情况：

如果DOM已经就绪（如果DOM不是“加载”，而是“交互式”或“完成”），则立即激发如果DOM仍在加载，它将在DOM可用（交互式）。

DOMContentLoaded事件在IE9和其他所有版本中都可用，所以我个人认为使用它是可以的。如果您没有将代码从ES2015传输到ES5，请将箭头函数声明重写为常规匿名函数。

如果您想等到加载所有资产、显示所有图像等，请改用window.onload。

2016-07-07 13:46:43

$（document）.ready等同物，不带jQuery

推荐文章

最新文章

标签