我注意到 <head>在我的网站(用于工作)中，有很多 <link rel="stylesheet" type="text/css" href="" />和 <script type="text/javascript" src="">标签。还有更多的 JavaScript/CSS 文件只为特定页面加载(我们使用 CodeIgniter，文件路径被传递到标题 View )。
我正在考虑使用条件/异步加载器(例如 yepnope.js、head.js 等)，但我注意到这样做有一个小问题。
在我们看来，有内联JavaScript，一些使用$(function(){})一些用途 $(document).ready(function(){}) ，有些只是具有不在 ready 中的代码(使用 jQuery) block 。
如果不编辑每个 View 文件以将其代码包装在一个函数中并在加载 JS 文件时调用它，是否有办法延迟内联代码直到 JavaScript 被异步加载？
最佳答案
您实际上可以延迟加载内联 javascript: 1- 将内联脚本中的类型参数更改为:text/delayscript
来自
<!– Inline Script –>
<script type="text/javascript" language="javaScript">
/* Code */
</script>
到
<!– Inline Script –>
<script type="text/delayscript">
/* Code */
</script>
为脚本标签提供自定义 Mime 类型 text/delayscript 会强制浏览器忽略其内容(请注意，将其完全保留将默认为 text/javascript)。
2-延迟加载所有内联脚本 一旦 heads.js(或您可能正在使用的其他框架)确认它延迟加载了所有外部 JS，您就可以获取所有自定义脚本标签的内容并将它们注入(inject)页面:
<script>
head.ready(function() {
var
_head = document.getElementsByTagName("head")[0],
_script = document.createElement('script'),
_scripts = document.getElementsByTagName("script"),
_txt = "text/delayscript",
_contents = []
;
for(var i=0,l=_scripts.length;i<l;i++){
var _type = _scripts[i].getAttribute("type");
if(_type && _type.toLowerCase() ==_txt)
_contents.push(_scripts[i].innerHTML)
}
_script.type = 'text/javascript';
_script.innerHTML = _contents.join(" ");
_head.appendChild(_script);
});
为了更加优雅，您实际上可以将内联脚本保留在 DOM 树中的原始层次结构中，而不是像我上面建议的那样将所有内容塞进一个脚本中，方法是将标记的内联脚本标记替换为新的一个具有 mime 类型文本/javascript 的:
head.ready(function() {
var
_scripts = document.getElementsByTagName("script"),
_doc = document,
_txt = "text/delayscript"
;
for(var i=0,l=_scripts.length;i<l;i++){
var _type = _scripts[i].getAttribute("type");
if(_type && _type.toLowerCase() ==_txt)
_scripts[i].parentNode.replaceChild((function(sB){
var _s = _doc.createElement('script');
_s.type = 'text/javascript';
_s.innerHTML = sB.innerHTML;
return _s;
})(_scripts[i]), _scripts[i]);
}
});
关于javascript - 延迟加载 JavaScript 和内联 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8946715/