推迟内嵌JavaScript执行？

Question

在我的网站上，我有很多内嵌JavaScript代码片段。他们大多需要jQuery和类似的东西。

但我想推迟jquery加载到页面呈现后。这意味着，我的内联JavaScript将执行，在jquery加载之前。有什么我可以做的吗？我正在寻找易于实现的解决方案（我也不能移动我的内联JavaScript，因为它是在为用户准备页面时自动生成的）。

Answer 1

你可以通过设置内嵌脚本以一个不会被浏览器，如text/example处理的type，并在文件中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"); 
    }); 
}); 

此代码等待，直到在页面加载，则在body的与一种类型的结束选择所有与text/example类型的脚本，并将其复制因此它们正常执行。

例如：

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

---

优点的该溶液：

• 它是一个跨浏览器的解决方案。
• 该代码是有效的HTML/JavaScript。
• 它在严格模式下工作。

缺点这一解决方案的：

• 你需要有在内嵌脚本控制来改变type。
• 正如troelskn所说，性能会比把所有的代码移到底部都差（但我知道有些情况是不可能的）。
• 它不适用于较旧的IE版本（尽管可修改代码以支持它们）。