通過檢測Dom是否準備好來移除阻止腳本？

Question

I 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

的一個問題是，你正在嘗試使用$(document).ready()之前的jQuery加載。

當您將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()已經加載，因爲它不是一個內置功能。