[JS]スクリプトを指定したタイミングで読み込ませるスクリプト -Lazy Loading Script
Post on:2011年11月11日
sponsors
外部スクリプトファイルを指定したタイミングで読み込ませるjQueryのプラグインを紹介します。
ちょっと前に流行った画像を遅れて読み込ませる「Lazy Load」のスクリプト版という感じです。
jQuery Lazy Loading Script – On Demand Javascript plugin Webrevised
[ad#ad-2]
Lazy Loading Scriptの特徴
- 外部スクリプトファイルを指定したタイミングで即時にロードします。
- ファイルが既にロード済みであれば、再びロードはしません。
- 必要のない時にはスクリプトを読み込まないため、ロード時間を減らします。
- AJAXベースのウェブアプリケーションをよりシンプルにできます。
Lazy Loading Scriptの実装
外部ファイル
「jquery.js」と当スクリプトを外部ファイルとして指定します。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script> <script type='text/javascript' src='jquery.lazyloadscript.js'></script>
JavaScript
Lazy Loading Scriptは3つのパラメータを設定して実装します。
- ロードするファイル
- callback関数：読み込み時
- callback関数：読み込み済みの時
<script type='text/javascript'>
$('.clickme').click(function() { $(document).lazyloadScript('myjs.js',function(){alert('just loaded myjs.js !');},function(){alert('already loaded myjs.js!');}); return false;});
</script>
HTML
上記は、リンクをクリックすると外部スクリプトファイルをロードします。
<a href='#' class='clickme'>Load the myjs.js script</a>
[ad#ad-2]
jquery.lazyloadscript.jsの中身
プラグイン自体は非常にシンプルなコードで書かれています。
(function($){
var my_lazy_loader_loaded_files = new Array(); //Will hold all loaded files
$.fn.lazyloadScript = function (filename,callback_func,callback_already_loaded) //callback(data,status)
{
//Check if the file is already loaded
var length = my_lazy_loader_loaded_files.length;
for(var i = 0; i < length; i++) {
if (my_lazy_loader_loaded_files[i] == filename)
if((callback_already_loaded)&&(typeof callback_already_loaded== 'function')){
callback_already_loaded.call(this);
return false;
}
}
if((callback_func)&&(typeof callback_func == 'function')){
jQuery.getScript( filename, function(data)
{
my_lazy_loader_loaded_files.push(filename);
callback_func.call(this,data)
return true;
});
}else
{
jQuery.getScript( filename, function(data)
{
my_lazy_loader_loaded_files.push(filename);
});
}
return false;
}
}) (jQuery);
[/javascript]
sponsors
