[JS]スクリプトを指定したタイミングで読み込ませるスクリプト -Lazy Loading Script

外部スクリプトファイルを指定したタイミングで読み込ませるjQueryのプラグインを紹介します。
ちょっと前に流行った画像を遅れて読み込ませる「Lazy Load」のスクリプト版という感じです。

サイトのキャプチャ

jQuery Lazy Loading Script – On Demand Javascript plugin Webrevised

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つのパラメータを設定して実装します。

  1. ロードするファイル
  2. callback関数:読み込み時
  3. 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>

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]

top of page

©2017 coliss