如何延遲JavaScript的嵌入？

我在我的網站的側邊欄中嵌入了Google趨勢小部件，這會延遲整個頁面的加載。而且，有時腳本從不停止加載，這幾乎導致瀏覽器崩潰。該腳本是這樣的：如何延遲JavaScript的嵌入？

<script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&amp;up__results_type=RISING&amp;up__property=empty&amp;up__search_term=&amp;up__location=SE&amp;up__category=0&amp;up__time_range=1-m&amp;up__max_results=10&amp;synd=open&amp;w=252&amp;h=350&amp;lang=sv&amp;title=Google+Trender&amp;border=0&amp;output=js"></script>

它只是返回的標記，我不能改變，因爲據我所知，我不能把這個腳本在我的網站的頁腳，然後有一個HTML元素上漲的在腳本加載後被替換的站點。我該如何延遲這個腳本的編程？

來源

2012-02-17 Richard B

'我不能把這個劇本我site'的頁腳爲什麼這麼好呢？ – 2012-02-17 10:18:08

原因然後小部件標記被添加到頁腳。 – 2012-02-17 10:28:36

在這個例子中，我會假設你的腳本，目前地方在你的頁面這樣的中間...

<div id="widget"> 
    <script src="google..."></script> 
</div>

...而且，該腳本基本上轉儲出內容，無論它恰好被放置，這使您無法將其移動到文檔的末尾。

你可以以後再添加腳本元素是這樣的...

<body> 
    ... 
    <div id="widget"> 
    </div> 
    .... 
    <script type="text/javascript"> 
     var widgetScript = document.createElement('script') 
     widgetScript.setAttribute('type', 'text/javascript') 
     widgetScript.setAttribute('src', 'http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&amp;up__results_type=RISING&amp;up__property=empty&amp;up__search_term=&amp;up__location=SE&amp;up__category=0&amp;up__time_range=1-m&amp;up__max_results=10&amp;synd=open&amp;w=252&amp;h=350&amp;lang=sv&amp;title=Google+Trender&amp;border=0&amp;output=js') 
     document.getElementById('widget').appendChild(widgetScript); 
    </script> 
</body>

使加載插件腳本的劇本就在你的頁面的底部，因此將只運行一次您的DOM是相當準備好了。然後創建腳本標記，並將其添加到您希望它在

UPDATE元素 - 使用這種方法根據您的反饋，這種替代可能會有幫助，雖然這是一個有點「粗糙」。

這是example on JSFiddle。請注意，即使小部件實際上仍在加載，頁面仍可見。

這可以通過將腳本加載到頁面最底部的隱藏div中，然後在加載時將隱藏div的內容轉移到頁面流中進一步顯示的可見小部件div中。

來源

2012-02-17 10:13:08 Fenton

這看起來不錯，但它不工作，腳本沒有加載。也許這是因爲腳本正在返回標記;一張桌子和一些CSS。 – 2012-02-17 13:34:12

@RichardB - 我添加了一個JSFiddle，它顯示了這樣做的另一種方法。 – Fenton 2012-02-17 14:06:59

更確切地說，但似乎工作得很好 - 甜！謝謝！ – 2012-02-20 10:02:28

你需要做的唯一一件事就是異步加載腳本：

<script type="text/javascript" async="true" src="http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&amp;up__results_type=RISING&amp;up__property=empty&amp;up__search_term=&amp;up__location=SE&amp;up__category=0&amp;up__time_range=1-m&amp;up__max_results=10&amp;synd=open&amp;w=252&amp;h=350&amp;lang=sv&amp;title=Google+Trender&amp;border=0&amp;output=js"></script>

來源

2012-02-17 10:17:11

好的，但沒有顯示，該區域是空的。 – 2012-02-17 10:31:13

如果請求的URL是錯誤的它不會加載，但加載腳本asyncrhonously你請求這是正確的方法來做到這一點。 – 2012-02-17 11:31:33

好的，謝謝，腳本是正確的。也許這是腳本中的東西，它使得不可能異步加載，我從這裏得到它：http://www.google.com/insights/search/#cmpt=q – 2012-02-17 12:29:50

如何延遲JavaScript的嵌入？

回答

相關問題