画像のローディング
画像のロード時に点滅ローディングメッセージを表示
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>
サンプル
サンプルでは画像をキャッシュさせないようにしているんですが、読み込みがそれほど重くはないので、ローディング画像が出る前に画像が表示されてしまうかもしれません。
