如何让脚本最后加载到网页上？答案

【问题标题】：How to get a script to load last on webpage?如何让脚本最后加载到网页上？
【发布时间】：2012-12-12 18:53:13
【问题描述】：

我有一个网页，上面主要是基本的 HTML。有一个部分我使用从外部源 (url) 提取的 JavaScript 加载 RSS 提要。问题是我的页面将加载所有内容直到该脚本，等待脚本加载（有时长达几秒钟），然后加载页面的其余部分。

如何强制它先渲染整个页面后加载脚本？

我的代码是这样的：

<html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
<more html>
...

【问题讨论】：

将脚本放在底部，或者使用异步加载。
@Cthulhu 我很确定情况正好相反。浏览器从上到下解析，并等待脚本加载。否则，您还期望在使用它运行的库之后立即执行代码吗？浏览器不会等待图像的 URL 解析和加载
@Cthulhu，它们按顺序加载并阻止页面的其余部分。如果他们没有另一个库的所需库可能会导致问题。例如，一个小的 jQuery 插件会在 jQuery 之前加载。
您确定没有什么需要立即使用 Javascript 库吗？如果没有，请在脚本标签上使用defer 或async 属性
@Cthulhu，大多数都这样做，因为在同步非延迟脚本运行之前解析无法继续。不执行脚本标签就无法正确解析<script>if (Math.random() < 0.5) { document.write("Hello, World!。

标签： javascript html rss load

【解决方案1】：

在头部的脚本标签中添加defer属性也可以

<script language="JavaScript" src="http://..." type="text/javascript" defer></script>

【讨论】：

能否给我一个链接，指向defer的解释和官方文档供参考？
developer.mozilla.org/en-US/docs/Web/HTML/Element/script
介绍答案将对提问者和其他社区成员有更大的帮助。

【解决方案2】：

您可以尝试将调用提要的函数包装在

中

jQuery(window).load(function(){
//embed RSS feed 
});

强制它最后加载。

【讨论】：

【解决方案3】：

两个选项：

将脚本块放在页面末尾。无论如何，这是一种很好的做法，因为您的页面结构将在用于操作它的脚本之前加载。由于用户通常会注意到页面加载而不是脚本，因此总体上看起来加载速度更快。
在开始的script 标记中包含defer 属性。请注意，defer 只能用于外部脚本文件（那些具有src 属性的文件）。见https://developer.mozilla.org/en-US/docs/HTML/Element/script。

【讨论】：

1.我将它放在页面的某个部分，因为我希望它显示在那里。如果我把它放在底部，它就不会放在正确的位置。 2. "defer" 和 "async" 都无法加载脚本。呈现整个页面，但不显示 RSS 提要。
你的脚本被外部引用了吗？
是的，我有“src”拉入 RSS 提要的 url 位置。
你不能把输入拉到一个变量中吗？如果您直接引用 RSS，您可以使用类似 stackoverflow.com/questions/226663/parse-rss-with-jquery 的内容，然后使用内容更新您选择的元素。这将允许您移动脚本标签。

【解决方案4】：

在页面加载后加载脚本的一种非常可靠的方法是在 javascript 中写出包含自身的脚本。

var theScript = document.createElement("script");
theScript.setAttribute("type","text/javascript");
theScript.setAttribute("src","//www.mysite.com/script.js");
document.getElementsByTagName("head")[0].appendChild(theScript);

【讨论】：

【解决方案5】：

将您的脚本标签移动到最后，它将在其他所有内容之后加载。例如：

<html>
  <more html>
  <more html>
  <script language="JavaScript" src="http://..." type="text/javascript"></script>
</html

【讨论】：