Question

我follow the article关于如何通过检测dom是否准备好来删除阻止脚本。

  // Check if dom is ready
  function DOMReady(callback) {
    if (document.addEventListener) { // native event
      document.addEventListener("DOMContentLoaded", callback, false);
    } else if (window.addEventListener) {
      window.addEventListener('load', callback, false);
    } else if (document.attachEvent) {
      window.attachEvent('onload', callback);
    }
  }

然后在体内，我可以打电话

<script>
    DOMReady(function () {
        loadJS(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'
        ], function () {               
            //alert("All Scripts Loaded");
        })
    });
 $(document).ready(function (e) { alert($('.abc').text()); })
</script>
<div class="abc">safdsfsd</div>

它只是不起作用，这些代码有什么问题。请帮忙。

full code is here at plnker

Answer 1

一个问题是你在jQuery加载之前尝试使用$(document).ready()。

当您将jQuery切换为动态（非阻塞）加载时，这意味着您必须在尝试使用它之前等待它加载。

当然，您的DOMReady()功能已经在完成$(document).ready()的工作了，所以您可以将其用于此工作，而不是仅仅将您放在$(document).ready()内的代码放入从加载jQuery返回的回调。在您的代码中，您知道DOM已准备好并且加载了jQuery，因此可以使用jQuery来修改DOM。

此外，您不必等待DOM准备就绪，以便异步加载jQuery，这样就不会阻止页面。

你可以这样做：

<script>
    loadJS(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'
        ], function () {               
            $(document).ready(function (e) { alert($('.abc').text()); });
        })
    });

</script>
<div class="abc">safdsfsd</div>

这将异步加载jQuery（非阻塞），然后在加载时，它将设置$(document).ready()代码。

此外，您显然必须确保已加载loadJS()，因为它不是内置函数。

通过检测Dom是否准备好来删除阻止脚本？

1 个答案: