loadScript、JavaScriptライブラリをブロックしない
高性能JavaScriptの本を読んでいる時、書き方を見ました.もちろん今はたくさんの在庫があります.そしてgithubを取って回収して、パッケージとして計算します.
住所:https://github.com/marcbuils/jquery.loadscript/blob/master/jquery.loadscript.js
scriptタグのプロパティについては、ここでHTMLScriptElementをご覧ください.https://developer.mozilla.org/zh-CN/docs/Web/API 他の3編:
最初のloadScriptは見てもいいです. https://github.com/zynga/loadScript/blob/master/loadScript.js
二つ目はヤフーのLazyLoadです.https://github.com/rgrove/lazyload/blob/master/lazyload.js
LazyLoadはより強力なloadScript()関数です.LazyLoad精縮後は約1.5 KBしかありません.gzipで圧縮したのではありません.使い方の例は以下の通りです.
LABjs:https://github.com/getify/LABjsこのライブラリは、ロードプロセスをより細かく制御し、可能な限り多くのコードを並列にダウンロードしてみます.具体的に見てもいいです
その公式サイト(http://labjs.com/documentation.php)またはgithub.
住所:https://github.com/marcbuils/jquery.loadscript/blob/master/jquery.loadscript.js
/**
* PluginAutoLoad: Load your plugins on html DOM without javascript code.
* http://marcbuils.github.com/jquery.pluginautoload/
* https://github.com/leiming/jquery.loadscript
*
* Par Marc Buils ( [email protected] )
* Lei Ming ( [email protected] )
* Sous licence LGPL v3 (http://www.gnu.org/licenses/lgpl-3.0.txt)
*
* v0.1.1 - 09/16/2015:
* First release
*
* v0.1.2 - 12/09/2015;
* Fix lazyLoad bug
*/
$(function () {
// lazyload script
// ref: http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
var _loadScript = function (url, params, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function () {
callback();
};
}
var scriptsProperties = [
'type', 'src', 'htmlFor', 'event', 'charset', 'async', 'defer', 'crossOrigin', 'text', 'onerror'
];
if (typeof params === 'object' && !$.isEmptyObject(params)) {
for (var key in params) {
if (params.hasOwnProperty(key) && $.inArray(key, scriptsProperties)) {
script[key] = params[key];
}
}
}
document.getElementsByTagName(params['lazyLoad'] ? 'body' : 'head')[0].appendChild(script);
script.src = url;
};
$.loadScript = function (p_url, p_params, p_callback) {
// Handle p_params is exist
if (arguments.length === 2 && typeof arguments[1] === 'function') {
p_callback = arguments[1];
p_params = {}
}
p_params = p_params || {};
var _return = $.Deferred();
// Call callback if necessary
if (typeof( p_callback ) === 'function') {
_return.done(function () {
p_callback();
});
}
// Load javascript file
_loadScript(p_url, p_params, function () {
_return.resolve();
});
return _return.promise();
};
})
具体的には:https://github.com/marcbuils/jquery.loadscript scriptタグのプロパティについては、ここでHTMLScriptElementをご覧ください.https://developer.mozilla.org/zh-CN/docs/Web/API 他の3編:
最初のloadScriptは見てもいいです. https://github.com/zynga/loadScript/blob/master/loadScript.js
二つ目はヤフーのLazyLoadです.https://github.com/rgrove/lazyload/blob/master/lazyload.js
LazyLoadはより強力なloadScript()関数です.LazyLoad精縮後は約1.5 KBしかありません.gzipで圧縮したのではありません.使い方の例は以下の通りです.
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js("the-rest.js", function () {
Application.init();
});
</script>
// Load a single JavaScript file and execute a callback when it finishes.
LazyLoad.js('http://example.com/foo.js', function () {
alert('foo.js has been loaded');
});
// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
alert('all files have been loaded');
});
// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
alert(arg);
}, 'foo.css has been loaded');
// Load a CSS file and execute the callback in a different scope.
LazyLoad.css('foo.css', function () {
alert(this.foo); // displays 'bar'
}, null, {foo: 'bar'});
第三のブロック以外のJavaScriptライブラリのローディングはLABjs:https://github.com/getify/LABjsこのライブラリは、ロードプロセスをより細かく制御し、可能な限り多くのコードを並列にダウンロードしてみます.具体的に見てもいいです
その公式サイト(http://labjs.com/documentation.php)またはgithub.