プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方

こんにちは、おじいちゃんです。
今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。

jQuery.ImgLoaderとは

多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。

デザインは綺麗な状態を見てもらいたいですよね。

そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。

準備

まずはImgLoaderを使うための準備をします。
下記URLからダウンロードしてみましょう。

https://github.com/Takazudo/jQuery.ImgLoader

bowerを利用している方は、下記コマンドでダウンロードすることができます。

 
bower i git://github.com/Takazudo/jQuery.ImgLoader.git

 
次にjQueryImgLoaderを読み込ます。
ImgLoaderはjQuery依存のライブラリなのでまずはjQueryを読み込みます。

<script src="./lib/js/jquery/jquery-1.11.1.min.js"></script>

 
ダウンロードしたImgLoaderを読み込みます。

<script src="./lib/js/jQuery.ImgLoader/jquery.imgloader.js"></script>

ImgLoaderの使い方

基本的なImgLoaderの使い方は、下記のようになります。

    
    var $preload = $('.preload');
    var imgSrcs = [];

    $preload.each(function(){
        imgSrcs.push($(this).attr('src'));
    });

    var loader = new $.ImgLoader({
        srcs : imgSrcs, //画像などのパスを配列に格納
        pipesize: 2, //同時にロードできる数の上限
        delay: 500,  //次のロードまでの遅延をミリ秒で指定
        timeout: 500,  //タイムアウトまでの時間をミリ秒で指定
        useXHR2: false //XMLHttpRequestVersion2を利用するかどうか
    });

    loader.on('progress', function(progress){
        var prog = progress.loadedRatio; //進捗率を取得
    });

    loader.on('itemload', function($img){
        console.log($img);
    });

    loader.on('allload', function($img){
        console.log('complete');
    });

    loader.load();  //ローディングを実行

順番にコードを見ていきましょう。
 
ImgLoaderには下記のようなオプションがあります。

    
    var $preload = $('.preload');
    var imgSrcs = [];

    $preload.each(function(){
        imgSrcs.push($(this).attr('src'));
    });

    var loader = new $.ImgLoader({
        srcs : imgSrcs, //プレロードした画像等のパスを配列に格納
        pipesize: 2, //同時にロードできる数の上限
        delay: 500,  //次のロードまでの遅延をミリ秒で指定
        timeout: 500,  //タイムアウトまでの時間をミリ秒で指定
        useXHR2: false //XMLHttpRequestVersion2を利用するかどうか
    });

上記のコードではプレロードしたい要素に任意のクラスを付与しておいて、jQueryオブジェクトとして取得します。
あとはjQueryオブジェクトをeachで回して、各要素のパスをsrcsに渡しています。
 
pipesizeやdelayを使えばローディングを制御することができます。
Githubページに実際に動かせるDEMOがあるので見てみてください。

https://github.com/Takazudo/jQuery.ImgLoader

    loader.on('progress', function(progress){
        var prog = progress.loadedRatio; //0~1の進捗率を取得
    });

progressイベントは、指定した要素の読み込みが終わるたびに呼び出されます。
戻り値で読み込んだ要素の全体数を1とした、ローディングの進捗率が0〜1の間で返ってきます。
進捗率に係数をかけることでアニメーションに利用することもできます。
 

    
    loader.on('itemload', function($img){
        console.log($img);
    });

itemloadイベントは要素ごとのローディングが終わったタイミングで、戻り値としてロードが完了した要素が返ってきます。画像のプリロードが終わったあとに、随時アニメーションなどをつけて表示させることができますね。
 

    
loader.on('allload', function($img){
      console.log('complete');
    });

allloadイベントは全てのロードが完了した際に呼ばれます。全てのローディングが終わったあとにメインのコンテンツを表示させたい場合は、このイベントを利用することで実装することができます。
 

    
loader.load();  //ロードを実行

ImgLoaderの実行ですね。

おわりに

以上がjQuery.ImgLoaderの使い方になります。
便利で簡単にプリロードやローディング画面が実装できるので、Webサイトの表示が遅くてユーザからの見え方が気になっている方などはぜひ使ってみてください。

そろそろ夏ですね。

味噌ラーメンが美味しい季節ですね。

札幌の味噌ラーメンが食べたいですね。

みなさんはどこの味噌ラーメンが好きですかね。

おやかましござんし。

【困ったときのjQuery】

※ jQuery UIを利用して要素をドラッグアンドドロップさせてみる

※ 入力フォームを更に便利にするjQueryプラグイン5つ

※ アニメーションを高速化するjQueryプラグイン「Velocity.js」を使ってみた

※ 超簡単jQuery！toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法

※ スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ