異步加載JavaScript並與內聯代碼耦合

Question

「降級腳本標籤」http://ejohn.org/blog/degrading-script-tags/和腳本DOM元素的組合是用於異步加載外部JavaScript並與內聯代碼耦合的一種很好的模式。

史蒂夫Souders的介紹很好地結合在本文中：http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

基本上一旦外部腳本加載網頁上的腳本由外部腳本觸發。我一直在想，如果外部腳本下載時運行的腳本嘗試添加事件處理程序會發生什麼情況。 DOM可能沒有完成加載，因此添加事件處理程序可能會失敗。

不過，Steve Souders的文章非常全面，甚至繼續討論Lazy Loading。這意味着外部腳本不會在頁面加載之前下載（因爲添加到DOM中的腳本元素在window.onload內完成）。這可以確保添加事件處理程序應該可以工作。

所以一切看起來不錯，但我留下了一個小問題 - 因爲我們等待頁面加載，用戶可以與頁面交互，甚至可能在事件處理程序之前離開頁面添加。

我有點擔心嗎？如果是這樣，是否有強大的方法來解決它？

感謝， 保羅

Answer 1

您可以添加腳本元素到DOM它加載時。 只需在內聯腳本中引用head元素並注入資源即可。 通過這種方式，您可以在DOM呈現時觸發瀏覽器加載外部腳本。

而你說得對，因爲注入的腳本被加載到內存中並不意味着DOMContentLoaded事件已經被觸發。 您必須監聽該事件才能在加載所有外部資產時執行與回調有關的DOM。