在我的网站中，我有许多内联 javascript sn-ps。他们中的大多数都需要 jquery 和类似的东西。
但我想将 jquery 加载推迟到页面呈现后。这意味着，我的内联 javascript 将在加载 jquery 之前执行。我能做些什么吗？我正在寻找易于实施的解决方案（我也无法移动我的内联 javascript，因为它是在为用户准备页面时自动生成的）。
【问题讨论】：
<script>？
标签： javascript jquery html
如果您可以将您的 javascript 放在文档的末尾会更好。使用小型内联 javascript sn-ps 洒在您的源代码上是页面性能的杀手。
也就是说，您可以创建一个数组并在该数组上推送函数。然后，在页面的最后，在加载 jquery 之后，循环遍历数组并执行每个函数。
例如：
<html>
...
<script>window.loadEvents = [];</script>
...
<script>loadEvents.push(function() { alert("inline code here"); });</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$.each(loadEvents, function(_,f) { f(); });</script>
</html>
但是 - 正如我所说 - 将所有脚本元素推送到页面底部会更好，而不是在 html 和 javascript 之间来回切换。这样做会严重降低渲染性能。
【讨论】：
<script>$.each(loadEvents, function(i, f) { f(); });</script>
您可以通过将内联脚本的type 设置为像text/example 这样的浏览器无法处理的脚本来模拟延迟，并在文档末尾克隆这些脚本，将type 替换为text/javascript.
处理所有text/examples的代码真的很简单：
window.addEventListener("load", function() {
var arr = document.querySelectorAll("script[type='text/example']");
for (var x = 0; x < arr.length; x++) {
var cln = arr[x].cloneNode(true);
cln.type = "text/javascript";
document.querySelectorAll("body")[0].appendChild(cln);
}
});
或者如果您更喜欢使用 jQuery（您必须在 之后添加此脚本，包括 jQuery 文件）：
$(function() {
$("script[type='text/example']").each(function() {
$(this).clone().attr("type","text/javascript").appendTo("body");
});
});
此代码等待页面加载完毕，然后选择所有类型为text/example 的脚本，并将它们复制到body 的末尾，类型为text/javascript，以便它们正常执行。
例如：
...
<script type="text/example">
console.log("I am before the h1");
</script>
<h1>Page Title</h1>
<script type="text/javascript">
console.log("I am after the h1");
</script>
...
将在控制台中产生这些消息：
我在h1之后
我在h1之前
你可以在这个 JSFiddle 上看到一个正在运行的演示：http://jsfiddle.net/rqckwc79/
此解决方案的优点：
此解决方案的缺点：
type。