Question

我在我网站的侧边栏中嵌入了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元素，在加载脚本后将其替换。我怎样才能延迟这个脚本？

Answer 1

在这个例子中，我假设您的脚本当前位于页面中间的某个位置，就像这样......

<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准备就绪后才会运行。然后它创建脚本标记并将其添加到您想要的元素中。

更新 - 根据您使用此方法的反馈，此备选方案可能有所帮助，尽管它有点“粗糙”。

这是example on JSFiddle。请注意，即使窗口小部件实际上仍在加载，页面也是可见的。

这可以通过将脚本加载到页面最底部的隐藏div中，然后在加载时将隐藏div的内容移动到页面流中更高的可见窗口小部件div。

Answer 2

您唯一需要做的就是异步加载脚本：

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

如何延迟嵌入javascript？

2 个答案: