如何延迟javascript的嵌入?

如何延迟javascript的嵌入?,javascript,embed,Javascript,Embed,我在我网站的边栏中嵌入了一个Google趋势小部件,这会延迟整个页面的加载。而且,有时脚本从未停止加载,这几乎会导致我的浏览器崩溃。脚本如下所示: <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__

我在我网站的边栏中嵌入了一个Google趋势小部件,这会延迟整个页面的加载。而且,有时脚本从未停止加载,这几乎会导致我的浏览器崩溃。脚本如下所示:

<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元素,在加载脚本后会被替换。在这个例子中,我假定你的脚本现在在你的页面中间的某处,比如……/P>。
<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>

。。。此外,脚本本质上会将内容转储到它恰好放置的任何位置,这会阻止您将其移动到文档的末尾

您可以稍后像这样添加脚本元素

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

...
....
var widgetScript=document.createElement('script')
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&向上搜索结果类型=上升和向上搜索属性=空和向上搜索搜索词=&;向上搜索位置=SE和向上搜索类别=0和向上搜索时间范围=1-m和向上搜索最大搜索结果=10和synd=打开和w=252和h=350和lang=sv和title=开始ogle+Trender&;border=0&;output=js')
document.getElementById('widget').appendChild(widgetScript);
因此,加载小部件脚本的脚本位于页面的底部,因此只有在DOM基本就绪时,它才会运行。然后,它创建脚本标记并将其添加到您想要的元素中

更新-根据您使用此方法的反馈,此替代方法可能会有所帮助,尽管它有点“粗糙”

请注意,即使小部件实际上仍在加载,页面仍然可见


这是通过将脚本加载到页面最底部的隐藏div中来实现的,然后在加载时,将隐藏div的内容转移到页面流中更上层的可见窗口小部件div中。

您只需异步加载脚本:

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


我无法将此脚本放在我网站的页脚中
那是为什么?因为随后小部件标记被添加到页脚中。如果请求URL错误,它将不会加载,但按照您的请求异步加载脚本才是正确的方法。好的,谢谢,脚本是正确的。也许是脚本中的某些内容使异步加载是不可能的,我从这里得到了答案:完全有可能您所包含的代码中的某些内容不会以这种方式工作。我将添加一个替代方案,它更灵活,但可能会有所帮助。这看起来很好,但不起作用,脚本没有加载。可能是因为脚本正在返回标记、一个表和一些CSS@RichardB-我添加了一个JSFiddle,它显示了另一种执行此操作的方法。