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

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

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

当前回答

以下是测试DOM就绪的最小代码片段，它适用于所有浏览器（甚至IE 8）：

r(function(){
    alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

看到这个答案。

2015-05-22 06:20:16

其他回答

现在是2020年，＜script＞标签具有defer属性。

例如：

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

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

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

2020-01-23 22:30:11

大多数普通的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

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

客户端.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

与jQuery相比，使用JavaScript等价物总是很好的。一个原因是依赖的库少了一个，而且它们比jQuery等同物快得多。

jQuery等价物的一个极好的参考是http://youmightnotneedjquery.com/.

就您的问题而言，我从上面的链接中获取了以下代码：）唯一需要注意的是，它仅适用于Internet Explorer 9及更高版本。

function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    }
    else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

2016-02-26 18:38:27

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

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");
});

2017-10-22 05:59:46

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

推荐文章

最新文章

标签