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'のフッターにこのスクリプトを置くことができませんか？ –

原因、ウィジェットマークアップがフッターに追加されます。 –

、私はあなたのスクリプトがどこかにこのようなあなたのページの真ん中に現在あることを前提としています...

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

...と、スクリプトは基本的にどこそこにコンテンツをダンプしていることあなたの文書の最後まで移動させないようにします。

あなたのDOMはかなりある、それは一度だけ実行されますので、

<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>

だからウィジェットスクリプトをロードするスクリプトは、右のあなたのページの一番下にある...このように、後にscript要素を追加することができます多くの準備ができている。

更新 - この方法を使用したフィードバックに基づいて、この代替方法が役立つかもしれませんが、少し「ぎこちなく」ですが、スクリプトタグを作成してその要素に追加してください。

ここにはexample on JSFiddleがあります。ウィジェットが実際に読み込まれているにもかかわらず、ページが表示されていることに注意してください。

これは、ページの一番下の隠れたdivにスクリプトを読み込み、読み込んだときに隠れたdivの内容をページフローのさらに上にある表示可能なwidget divにシフトすることによって機能します。

出典

2012-02-17 10:13:08 Fenton

これは素晴らしいですが、動作していない、スクリプトが読み込まれていません。スクリプトがマークアップを返すためかもしれません。テーブルといくつかのCSS。 –

@RichardB - これを行う別の方法を示すJSFiddleを追加しました。 – Fenton

実際にはもっと突っ込んでいるが、うまくいくようだ - 甘い！ありがとう！ –

あなたがする必要がある唯一の事は非同期にスクリプトをロードすることである：それは、その後だなぜ

<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

しかし、何も表示されません、領域は単に空です。 –

リクエストURLが間違っている場合は、ロードする必要はありませんが、リクエストしたとおりにスクリプトを非同期にロードするには、適切な方法を実行してください。 –

ありがとう、スクリプトは正しいですが。おそらくスクリプト内に非同期に読み込むことができないものがあります。http://www.google.com/insights/search/#cmpt=q –

JavaScriptの埋め込みを遅らせるには？

答えて

関連する問題