▼読込んだ画像を隠しておき、すべての画像が読込まれたら順番にフェードインしながら画像を表示していきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>InnerFade with Jquery | 設定サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.whenloaded.js"></script>
<script type="text/javascript">
$(function(){
$('<p id="message"></p>')
.append('Images are loading... (est waiting time: 10 secs)')
.insertBefore('#thumbnails');
$('#thumbnails img')
.css({opacity: 0,height: 0,width: 0})
.whenLoaded(function(){
$('#message').slideUp(function(){
$(this).remove();
});
var all = $(this);
function fadeIn(i) {
if(!all[i]) { return; }
$(all[i]).animate({opacity: 1,height: '75px',width: '75px'},400);
setTimeout(function(){fadeIn(i+1);},200);
}
fadeIn(0);
});
});
</script>
<style type="text/css">
#thumbnails {
margin:0; padding:0;
width:500px; height:300px;
background:gold;
}
#thumbnails img {
display: inline;
float: left;
margin: 8px;
padding: 3px;
background: white;
border: 1px solid #000;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1><a href='http://medienfreunde.com/lab/innerfade/'>InnerFade with Jquery</a> | 設置サンプル</h1>
<p>▼読込んだ画像を隠しておき、すべての画像が読込まれたら順番にフェードインしながら画像を表示していきます。</p>
<!-- CODE -->
<div id="thumbnails" class="cf">
<img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_s.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_s.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" height="75" width="75" />
<img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" height="75" width="75" />
</div>
<!-- / CODE -->
</body>
</html>