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

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プラグインまとめ

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。