jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2014.5.28

画像読み込み時にローディングを表示する:改訂版

Category:
Tips

以前書いた「画像読み込み時にローディングを表示する(IE対応)」の記事はそこそこ需要があるようで、本ブログのなかではアクセスを集めているようでした。

ただ以前の書き方ではhtml上のimg要素のみを対象にした書き方になっていたので、css background-imageで指定した画像も対象に含めようとすると、その都度多少の改変が必要になっていました。

以前のコードを使いまわすにしても、そういった修正が必要なケースが増え面倒になってきており、そのため最初から対象に含めやすいよう修正してみました。

var obj_type_get = function(type, obj){
    var clas = Object.prototype.toString.call(obj).slice(8, -1);
    return obj !== undefined && obj !== null && clas === type;
};

var preload = function(img_arr_later, callback){
    var img_elm = $('img.load'),
        img_arr = [],
        img_arr_lng = 0,
        img_obj_arr = [];

    img_elm.each(function(indx){
        img_arr[indx] = $(this).attr('src');
    });

    if( obj_type_get('Array', img_arr_later) ){
        for (i = 0; i < img_arr_later.length; i++) {
            Array.prototype.push.apply(img_arr, img_arr_later);
        }
    }

    img_arr_lng = img_arr.length;

    $.each(img_arr, function(indx){
        img_obj_arr[indx] = new Image();
        img_obj_arr[indx].onload = function(){
            img_arr_lng = img_arr_lng - 1;
            if( 0 >= img_arr_lng ){
                if( obj_type_get('Function', callback) ){
                    callback();
                }
            }
        };
        img_obj_arr[indx].src = img_arr[indx];
    });
};

var img_arr2 = ['https://farm6.staticflickr.com/5521/14077441730_1e5f0343bc_b.jpg'];

$('document').ready(function(){
    preload(img_arr2, function(){
        $('#loading').hide();
        $('#photo').fadeIn(500);
    });
});

以前はjQueryオブジェクトにimg要素を指定し、それをそのままローディング対象にしていたわけですが、img要素を一度配列化(img_arr)することで、それにpushすることで最初のimg要素以外の画像パスもローディング対象に含められるようにしました。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.