延迟加载JavaScript和内联JavaScript [英] Lazy loading JavaScript and Inline JavaScript
问题描述
我注意到＆LT; HEAD＆GT; 我的网站（工作）的，也有很多＆LT的;链接rel =样式表TYPE =文/ CSS的href =/＆GT; 和＆LT;脚本类型=文/ JavaScript的SRC =＆GT; 标记。但是也有一些只加载特定页面，甚至更多的JavaScript / CSS文件（我们使用codeIgniter，文件路径传递给头视图）。
I noticed in the <head> of my site (for work), there are a lot of <link rel="stylesheet" type="text/css" href="" /> and <script type="text/javascript" src=""> tags. There are even more JavaScript/CSS files that are only loaded for specific pages (we're using CodeIgniter, and the file paths are passed to the header view).
我使用的是有条件/异步加载器（如yepnope.js，head.js等）考虑，但我注意到一个小问题，这样做。
I was considering using a conditional/asynchronous loader (eg. yepnope.js, head.js, etc.), but I noticed a small problem with doing this.
在我们的看法，有内联JavaScript，某些使用 $（函数（）{}）某些用途 $（文件）。就绪（功能（）{}），有的只是有code（使用jQuery），这不是在就绪块。
In our views, there is inline JavaScript, some uses $(function(){}) some uses $(document).ready(function(){}), and some just has code (using jQuery) that's not in a ready block.
而无需编辑每个视图文件来包装其code的函数和调用，当JS文件被加载，有没有耽误直列code，直到JavaScript是异步加载的方式？
Without editing EVERY view file to wrap its code in a function and calling that when the JS files are loaded, is there a way to delay the inline code until the JavaScript is asynchronously loaded?
推荐答案
您可以真正lazyload内嵌的JavaScript：
1-变化内嵌脚本类型参数：文本/ delayscript
You can actually lazyload inline javascript: 1- Change the type parameter in the inline script to: 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的）。
Giving the script tag a custom Mime type text/delayscript forces the browser to ignore its content (Please note that leaving it out entirely will default to text/javascript).
2 - 延迟加载的所有内嵌脚本
一旦heads.js（或者你可能会使用其他的框架）证实，懒加载的所有外部JS，你可以再抓你所有的自定义脚本标记的内容，并在页面注入其中：
2- Lazy load all inline scripts Once heads.js (Or an other framework you might be using) confirms that it lazy loaded all your external JS, you can then grab the content of all your custom script tags and inject them in the page:
<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类型text / JavaScript的：
To be even more graceful, you can actually keep the inline scripts in their original hierarchy in the DOM tree instead of jamming all their content in one script, as I have suggested above, by replacing the marked inline script tag by a new one that has 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]);
}
});
这篇关于延迟加载JavaScript和内联JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
