Roc*_*mat 17 javascript asynchronous codeigniter
我注意到在<head>我的网站(工作),有很多<link rel="stylesheet" type="text/css" href="" />和<script type="text/javascript" src="">标签.还有更多的JavaScript/CSS文件仅为特定页面加载(我们使用CodeIgniter,文件路径传递到标题视图).
我正在考虑使用条件/异步加载器(例如,yepnope.js,head.js等),但我注意到这样做有一个小问题.
在我们的视图中,有内联JavaScript,有些使用$(function(){})一些用途$(document).ready(function(){}),有些只是有代码(使用jQuery)不在ready块中.
无需编辑每个视图文件以将其代码包装在函数中并在加载JS文件时调用它,是否有办法延迟内联代码,直到JavaScript被异步加载？
You*_*abi 28
您实际上可以延迟内联javascript:1-将内联脚本中的type参数更改为: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,你就可以获取所有自定义脚本标记的内容并将它们注入页面中:
<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 type text/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]);
}
});
您必须考虑将内联代码移到"外部"并将其包含在内
<script defer="defer" type="text/javascript" src="">