当DOM可修改/交互式时运行javascript

Question

我们有将元素注入DOM的JavaScript代码。因此，它需要等到DOM处于所需状态。

我们为此使用以下内容：

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        if (!tagsPlaced)
            placeTags();
    }
};

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

[当网站的脚本运行缓慢或未加载时，它永远不会触发这些事件。

从用户的角度来看，该站点可以完全使用，如果我们手动调用“ placeTags”，它也可以正常工作。

一种解决方案是从页面的页脚调用“ placeTags”。不幸的是，我们需要支持在页面上的任意位置加载JavaScript。

该怎么办？

Answer 1

使用defer标记上的script属性作为代码，并在评估脚本时立即运行代码，而不是等待。所有甚至模糊的现代浏览器（包括IE10和IE11）support the defer attribute：

defer

[如果由于某种原因您不能执行此操作（或不能依靠它完成操作），则可以检测到<script src="/path/to/your/script" defer></script> 需要什么（无论是什么），并使用placeTags循环，直到/除非那东西出现了。例如，如果您需要等待特定元素显示在DOM中，则可能看起来像这样：

setTimeout