/blog

画像を非表示にさせてから、画像の読み込み完了後にエフェクトをかけたかったのでそのメモ。jQuery使用。

すべての img に対して、それぞれ読み込みを待ってからフェードさせてみる。

$(function(){
  $('img').each(function(i) {
    var self = this;
    $(self).hide();
    $(self).load(function(){
      $(self).fadeIn('slow');
    });
  });
});

これだと

• hide() で画像が display:none; になり幅・高さがなくなる。親ブロックのサイズが変わったり。
• ロードが終わったタイミングで随時表示させるので、並べた画像が並び順ではなくロードの終わった順番で表示される
• fedeIn() の処理が同時に起きて重い

使い道によるけど、いったん同サイズの div で囲むとか、端からそれぞれアニメーションの終了を待って順番に表示させるとか、実際に使うには工夫が必要そう。