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

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

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

当前回答

这很好https://stackoverflow.com/a/11810957/185565穷人的解决方案。一条评论认为，这是在紧急情况下纾困的一种对策。这是我的修改。

function doTheMagic(counter) {
  alert("It worked on " + counter);
}

// wait for document ready then call handler function
var checkLoad = function(counter) {
  counter++;
  if (document.readyState != "complete" && counter<1000) {
    var fn = function() { checkLoad(counter); };
    setTimeout(fn,10);
  } else doTheMagic(counter);
};
checkLoad(0);

2013-10-03 09:12:53

其他回答

以下是测试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

这个解决方案怎么样？

// other onload attached earlier
window.onload=function() {
   alert('test');
};

tmpPreviousFunction=window.onload ? window.onload : null;

// our onload function
window.onload=function() {
   alert('another message');

   // execute previous one
   if (tmpPreviousFunction) tmpPreviousFunction();
};

2012-08-17 07:33:55

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

jQuery中的ready函数做了很多事情。坦率地说，除非你的网站有惊人的小输出，否则我看不出替换它的意义。jQuery是一个非常小的库，它处理您稍后需要的各种跨浏览器的事情。

无论如何，在这里发布它没有什么意义，只需打开jQuery并查看bindReady方法。

它首先根据事件模型调用document.addEventListener（“DOMContentLoaded”）或document.attachEvent（“unreadystatechange”），然后继续。

2009-04-28 22:02:04

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

推荐文章

最新文章

标签