跨浏览器无依赖 DOM 就绪 | CSS-Tricks

Denis Ciccale 的版本

var DOMReady = function(a, b, c) {
  b = document
  c = 'addEventListener'
  b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a)
}
    
DOMReady(function () {
  alert('The DOM is Ready!');
});

最小化

var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}

Dustin Diaz 的版本

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

他还有一个代码库，其中的代码略有不同（并且看起来更新），所以你可能想尝试一下，尽管我发现上面这个版本本身已经相当有效了。他的 0.3.0 分支是 IE 6-7-8 所必需的。

原生 DOM 函数是

document.addEventListener('DOMContentLoaded', function() {

});

如果你只希望支持支持该功能的浏览器，那么这将是一个不错的选择。

Federico Brigante

# 2015年2月24日

除了 Dustin Diaz 的版本之外，都不应该使用这些方法。

DOMContentLoaded 是一个只发生一次的事件，所以如果你在事件触发 *之后* 附加一个函数，该函数将不会被调用——也就是说，网站可能会崩溃。

对于异步加载的脚本（async 属性或其他方法），这尤其是一个问题。

我使用 bloody-domready，因为它是我在特定情况下（IE10 中的自动重新加载）唯一有效的解决方案。

Anhvu

# 2015年3月23日

太棒了 :D 谢谢

Lisa

# 2018年11月16日

我一直使用以下方法作为跨浏览器 DOM 就绪解决方案，它与其他任何我见过的解决方案一样向后兼容，并且比上面提到的方法更短（不包括 Dustin Diaz 的版本，该版本非常巧妙，我现在想弄清楚那个版本）。

document.onreadystatechange = function () { if (document.readyState == ‘complete’) { /* DOM 就绪后执行 */ } };

评论

发表评论 取消回复

发表评论取消回复