最近またFlash全盛期のころのようなリッチな表現をするサイトが増えてきた気がします。
ただそういったサイトは多数の画像や動画を読み込むなどローディングに時間がかかることも多く、その間の離脱を防ぐためいろいろなローディング画面が実装されています。
その際に必要なのがローディングの進捗情報の取得です。0〜100の進捗する値がほしいですよね。今回はそういうときに便利なプラグイン jQuery.ImgLoader を紹介します。
用意するもの
まずはGitHubからプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。jQueryプラグインなのでjQuery（1.9.1）以上とプラグイン本体を読み込みましょう。
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script> <script src="jquery.imgloader.min.js"></script>
基本的な使い方
一番基本的な使い方は以下のとおりです。
$(function(){
//loaderの設定を行います
var loader = new $.ImgLoader({
srcs: [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg' ],
useXHR2: true,
timeout: 20000
});
//progressはローディングの進捗ごとに発生します
loader.on('progress', function(progressInfo){
//progressInfo.loadedRatioで進捗状況を0〜1で取得できます。
console.log(progressInfo.loadedRatio);
});
//ファイルのロードが完了するごとに行う処理です。
loader.on('itemload', function($img){
$('#somewhere').append($img);
});
//全てのロードが完了した際に行う処理です。
loader.on('allload', function($img){
alert('everything loaded!');
});
//ローダーを起動します。
loader.load();
});
ただ、この書き方だと画像をいちいち指定しなければならないのでちょっと面倒です。
なのでローダー設定のsrcs部分は自動化します。
$(function(){
//ローディング状況を取得する要素を指定。
var $preload = $('img');
//指定要素のsrcを格納するための配列
var obj_srcs = [];
$preload.each(function(){
//.eachを使って、指定した要素を順番に参照していきsrcを配列に格納。
obj_srcs.push($(this).attr('src'));
});
var loader = new $.ImgLoader({
srcs : obj_srcs,
pipesize: 3, //同時にロードを行う要素の数。これだと3つごとに読み込み完了となる。
delay: 0, //次のロード開始までの遅延時間を指定する。
useXHR2: true,
timeout: 20000
});
//progressはローディングの進捗ごとに発生します
loader.on('progress', function(progressInfo){
//progressInfo.loadedRatioで進捗状況を0〜1で取得できます。
console.log(progressInfo.loadedRatio);
});
//ファイルのロードが完了するごとに行う処理です。
loader.on('itemload', function($img){
//処理を記述。
});
//全てのロードが完了した際に行う処理です。
loader.on('allload', function($img){
//処理を記述。
});
//ローダーを起動します。
loader.load();
//ちなみに全てのロードを中断する場合は下記が用意されています。
loader.kill();
});
ローディングの値は純粋にデータの読み込み量を取得するわけではなく、ファイルの総数と読み込みが完了したファイル数みたいなところから進捗値にしているっぽいです。
なので画像がたくさんみたいなサイトの場合は割と綺麗に値が出ますが、1ファイルが重い動画も含む場合なんかの読み込み量は綺麗に出せないのかなーと思いました。
