画像のローディング

画像のロード時に点滅ローディングメッセージを表示

jQuery

$(function () { // 点滅ローディング setInterval(function() { $('span').fadeOut('slow', function() { $(this).fadeIn('slow'); }); }, 2000); $('li').each(function(){ $(this).prepend('<span>Now Loading...</span>'); // 画像読み込み $(this).children('img').bind('load', function(){ // ローディングを消去 $(this).prev('span').remove(); // 画像表示 $(this).fadeIn('fast'); }); });

HTML

<ul> <li><img src="/img/xxx.jpg"></li> <li><img src="/img/xxx.jpg"></li> <li><img src="/img/xxx.jpg"></li> <li><img src="/img/xxx.jpg"></li> <li><img src="/img/xxx.jpg"></li> </ul>

サンプル

サンプルでは画像をキャッシュさせないようにしているんですが、読み込みがそれほど重くはないので、ローディング画像が出る前に画像が表示されてしまうかもしれません。

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。