画像をパラパラフェードして切り替える様なUIをJSで作る時、画像をプリロードしておかないとパラパラ画像が出てきてちょっとかっこわるい。でもプリロードするのはめんどかったり、ローディング待ちの表示を出すのもちょっとめんどい。

そもそも、ローディング待ちのくるくるスピナーなアニメGIFって、あれローディング終わったらもう用済みだし、使うにしてもそいつを先にプリロードしておかないと意味ないし、なんかすごい無駄感漂うので微妙って思ってた。

そこで、あのくるくる、CSS3でやっちゃうのあったなーとか思って見てたけど、んーIEがねーって思って色々ググってたら、spin.js ってのを見つけた。これは、ローディングのくるくるを、CSS3（フォールバックでVML）でやってくれちゃうと。これはすごい。これと、jQuery.ImgLoader を使って、Flashでよくあるようなプリロード表現をしてみる。以下は30枚の画像をプリロードした後にギャラリーみたいのをやる。

• demo
• JS
• CSS

<div class="gallery">
    <div class="gallery-counter">loading...</div>
    <div class="gallery-main"></div>
</div>

$.fn.gallery = function(options){

  return this.each(function(){

    /* I need els in this */

    var $main = $('.gallery-main', this);
    var $counter = $('.gallery-counter', this);

    /* setup spinner */

    var spinner_options = {
      color: '#333',
      length: 20,
      radius: 30
    };
    var spinner = (new Spinner(spinner_options)).spin($main[0]);
    var $spinner = $(spinner.el); // spinner element

    /* setup loader */

    var $imgs = $();
    var srcs = options.srcs;
    var loader = $.ImgLoader({
      srcs: srcs,
      pipesize: 2,
      delay: 0
    });
    loader.bind('itemload', function($img, i){
      $counter.text( (i+1) + ' / ' + srcs.length );
      $imgs = $imgs.add($img);
    });
    loader.bind('allload', function(){
      $counter.text('loading complete');
      allLoaded();
    });

    /* things after load complte */

    function allLoaded(){
      setTimeout(function(){
        $.when(
          $spinner.fadeOut(),
          $counter.fadeOut(200)
        ).done(function(){
          $spinner.remove(); // we don't need there anymore
          $counter.remove(); // we don't need there anymore
          $imgs.hide().appendTo($main);
          tick();
        });
      }, 400); // I like to wait a little
    }

    function tick(){
      var $all = $('img', $main);
      var $current = $all.eq(0);
      var $next = $all.eq(1).fadeIn(function(){
        $current.appendTo($main).hide();
        setTimeout(function(){
          tick();
        }, 1000);
      });
    }

    loader.load(); // do them all!

  });
};

$(function(){

  /* imgs/1.jpg ... 30.jpg */
  var srcs = [];
  for(var i=1, l=30; i<=30; i++){
    srcs.push('imgs/' + i + '.jpg');
  }

  /* do it */
  $('.gallery').gallery({ srcs: srcs });

});

IE6でもくるくる動いてた。これはなかなかイイかも。

結構、こういうUIを作る時、画像のプリロードを意識しない人が多いかと思うので、興味あれば jQuery.ImgLoader を是非使ってみてくだせー。そもそもプリロードということ自体がなんか微妙にハックっぽくて微妙やなと思ったりはするけれども。