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

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

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

当前回答

我只使用：

setTimeout(function(){
    //reference/manipulate DOM here
});

而且与上面的答案中的document.addEventListener（“DOMContentLoaded”//等不同，它的工作时间可以追溯到IE9——http://caniuse.com/#search=DOMContentLoaded仅表示最近的IE11。

有趣的是，我在2009年偶然发现了这个setTimeout解决方案：检查DOM的准备是否过度？，我的意思是“使用各种框架的更复杂的方法来检查DOM的就绪性是否过分”。

我对这种技术为什么有效的最好解释是，当使用这样一个setTimeout的脚本到达时，DOM正处于解析过程中，因此setTimeout中的代码的执行会延迟到该操作完成。

2017-10-25 01:42:59

其他回答

如果你想支持Internet Explorer 7+（没有怪癖、兼容性和其他问题），最后一个Chrome、最后一个Safari、最后一次Firefox和没有iframes，这就足够了：

is_loaded = false
callbacks = []

loaded = ->
  is_loaded = true
  for i in [0...callbacks.length]
    callbacks[i].call document
  callbacks = []

content_loaded = ->
  document.removeEventListener "DOMContentLoaded", content_loaded, true
  loaded()

state_changed = ->
  if document.readyState is "complete"
    document.detachEvent "onreadystatechange", state_changed
    loaded()

if !!document.addEventListener
  document.addEventListener "DOMContentLoaded", content_loaded, true
else
  document.attachEvent "onreadystatechange", state_changed

dom_ready = (callback) ->
  if is_loaded
    callback.call document
  else
    callbacks.push callback

2013-10-27 20:55:47

jQuery的回答对我很有用。经过一点重构，它很好地满足了我的需求。我希望这对其他人有所帮助。

function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

2012-09-05 16:56:58

最小且100%工作

我已经从PlainJS中选择了答案，它对我来说很好。它扩展了DOMContentLoaded，因此它可以在所有浏览器中被接受。

此函数等效于jQuery的$（document）.ready（）方法：

document.addEventListener('DOMContentLoaded', function(){
    // do something
});

然而，与jQuery不同的是，这段代码只能在现代浏览器中正常运行（IE>8），如果在插入此脚本时（例如通过Ajax）已经呈现了文档，则无法正常运行。因此，我们需要稍微扩展一下：

function run() {
    // do something
}

// in case the document is already rendered
if (document.readyState!='loading') run();
// modern browsers
else if (document.addEventListener) 
document.addEventListener('DOMContentLoaded', run);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
});

这基本上涵盖了所有的可能性，是jQuery助手的可行替代品。

2019-09-30 06:41:57

只需将其添加到HTML页面的底部。。。

<script>
    Your_Function();
</script>

因为，HTML文档是按上下顺序解析的。

2013-02-23 11:51:26

比较

这里（在下面的片段中）是所选择的可用浏览器“内置”方法及其执行顺序的比较。评论

任何现代浏览器都不支持document.onload（X）（从不触发事件）如果您使用<body onload=“bodyOnLoad（）”>（F），同时使用window.onload（E），则只执行第一个（因为它会覆盖第二个）<body onload=“…”>（F）中给定的事件处理程序由附加的onload函数包装document.onreadystatechange（D）不覆盖document.addEventListener（'readystatechange'…）（C）可能是因为类似XYZevent的方法独立于addEventListener队列（允许添加多个侦听器）。在执行这两个处理程序之间可能不会发生任何事情。所有脚本都在控制台中写入时间戳，但也可以访问div的脚本也在主体中写入时间标记（在脚本执行后单击“FullPage”链接查看）。解决方案readystatechange（C，D）由浏览器执行多次，但针对不同的文档状态：loading-文档正在加载（没有在代码段中激发）交互式-文档在DOMContentLoaded之前被解析和激发完成-加载文档和资源，在加载body/window之前激发

<html><head><脚本>//溶液Aconsole.log（`[timestamp:${Date.now（）}]A:Head脚本`）；//溶液Bdocument.addEventListener（“DOMContentLoaded”，（）=>{print（`[时间戳：${Date.now（）}]B:DOMContentLoaded`）；});//溶液Cdocument.addEventListener（'readystatechange'，（）=>{print（`[时间戳：${Date.now（）}]C:就绪状态：${document.ReadyState}`）；});//溶液Ddocument.onreadystatechange=s=>{print（`[时间戳：${Date.now（）}]D:document.onrreadystatechange就绪状态：${document.ReadyState}`）}；//解决方案E（从未执行）window.onload=（）=>{print（`E:<body onload=“…”>覆盖此处理程序`）；};//溶液F函数体OnLoad（）{print（`[timestamp:${Date.now（）}]F:<body onload='…'>`）；infoAboutOnLoad（）；//其他信息}//溶液Xdocument.onload=（）=>｛print（“document.onlead从未启动”）｝；//助手函数打印（txt）｛console.log（txt）；如果（mydiv）mydiv.innerHTML+=txt.replace（'<'，'&lt；'）.replace（'>'，'&gt；'）+'<br>'；}函数infoAboutOnLoad（）{console.log（“window.onload（重写后）：”，（“”+document.body.onload）.replace（/\s+/g，“”））；console.log（`body.onload==window.onload-->${document.body.onload==window.onload}`）；}console.log（“window.onload（覆盖前）：”，（“”+document.body.onload）.replace（/\s+/g，“”））；</script></head><body onload=“bodyOnLoad（）”><div id=“mydiv”></div>的底部<脚本>//溶液Gprint（`[timestamp:${Date.now（）}]G:<body>底部脚本`）；</script></body></html>

2020-08-20 20:38:17

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

推荐文章

最新文章

标签