【参照】jQuery.Preload
img要素のsrc属性に指定されている画像ファイルをプレロード
Done: 0/?
0 were loaded successfully.
0 couldn't be loaded.
Last loaded: none
Loading: none
a要素のhref属性に指定されている画像ファイルをプレロード
img要素のsrc属性に指定されている画像ファイル（*.png）とそのロールオーバー画像（*_over.png）をプレロード
基準URLと拡張子を配列で指定したファイル名と結合したURLの画像をプレロード
Loading...
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.preload.js"></script>
<script type="text/javascript">
$(function(){
/* Link Mode */
var $links = $('#images a');
var $preview = $('#preview');
//this mode doesn't require any setting, can have though
$links.preload({ threshold:2 }); //same as $.preload( $links, { threshold:2 } );
$links.mouseover(function(){
$preview.attr('src', this.href);
});
$links.click(function(){
return false;
});
/* Placeholder Mode */
$('#summary').fadeIn('slow');
/**
* All the functions below, are used to update the summary div
* That is not the objective of the plugin, the really important part
* is the one right below. The option placeholder, and threshold.
*/
$.preload( '#ph-images img', {//the first argument is a selector to the images
onRequest:request,
onComplete:complete,
onFinish:finish,
placeholder:'/content/img/ajax/placeholder.jpg',//this is the really important option
notFound:'/content/img/ajax/notfound.jpg',//optional image if an image wasn't found
threshold: 2 //'2' is the default, how many at a time, to load.
});
function update( data ){
$('#done').html( ''+data.done );
$('#total').html( ''+data.total );
$('#loaded').html( ''+data.loaded );
$('#failed').html( ''+data.failed );
};
function complete( data ){
update( data );
$('#image-next').html( 'none' );//reset the "loading: xxxx"
$('#image-loaded').html( data.image );
};
function request( data ){
update( data );
$('#image-next').html( data.image );//set the "loading: xxxx"
};
function finish(){//hide the summary
$('#summary').fadeOut('slow');
};
$("#rollover-images img").preload({
find: '.png',
replace: '_over.png'
})
.hover(function(){
this.src = this.src.replace('.png','_over.png');
},function(){
this.src = this.src.replace('_over','');
});
/* URL Mode */
var urls = [
'3639/3664935712_94ca67b18b',
'3220/3664935670_b94968ccbc',
'3611/3664132439_78c681eb6d',
'3348/3664935456_0ee9b93009',
'3394/3664935528_16fff63afc'
];
$.preload( urls,
{
base:'http://farm4.static.flickr.com/',
ext:'.jpg',
onComplete:function( data ){
var img = new Image();
img.src = data.image;
$('#url-images').append(img);
},
onFinish:function(){
$('#url-images p').fadeOut(2000);
}
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Placeholder Mode */
#summary{
position:absolute;
top:10%; left:10%;
border:2px solid #ccc;
background-color:black;
color:white;
z-index:5;
font-size:10px;
width:50%;
text-align:center;
display:none;
padding:5px;
overflow:hidden;
}
#summary span{
color:#933;
font-weight:bolder;
}
#image-loaded,#image-next{
font-size:10px;
}
#ph-images{
width:100%;
position:relative;
}
#ph-images img{
width:240px; height:135px
border:1px black solid;
}
/* Link Mode */
#pane{
width:860px; height:303px;
position:relative;
background-color:#333;
border:1px solid #333;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#images li {
margin:20px 0; padding:0;
list-style:none;
}
#images li a {
color:#ff6699;
}
#preview{
position:absolute;
top:10px; right:10px;
width:500px; height:281px;
border:1px black solid;
}
/* Rollover Mode */
#rollover-images{
}
#rollover-images img{
margin:10px;
}
/* URL Mode */
#url-images{
width:790px; height:300px;
background:#000;
position:relative;
}
#url-images img {
margin:10px 0 0 10px;
width:240px; height:135px
}
#url-images p {
color:#933;
font-size:20px;
position:absolute;
top:145px;
left:253px;
}
</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>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://flesler.blogspot.com/search/label/jQuery.Preload'>jQuery.Preload</a></p>
<!-- CODE -->
<h2>Replaceholder Mode</h2>
<p>img要素のsrc属性に指定されている画像ファイルをプレロード</p>
<div id="ph-images">
<img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" alt="サラダ@オ・タン・ジャディス" />
<img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg" alt="ノルディック＠オ・タン・ジャディス" />
<img src="404.jp" alt="404" />
<img src="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d.jpg" alt="ノルディック＠オ・タン・ジャディス" />
<img src="http://farm4.static.flickr.com/3348/3664935456_0ee9b93009.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" />
<img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" />
<div id="summary">
<p>Done: <span id="done">0</span>/<span id="total">?</span></p>
<p><span id="loaded">0</span> were loaded successfully.</p>
<p><span id="failed">0</span> couldn't be loaded.</p>
<p>Last loaded: <span id="image-loaded">none</span></p>
<p>Loading: <span id="image-next">none</span></p>
</div>
</div>
<h2>Link Mode</h2>
<p>a要素のhref属性に指定されている画像ファイルをプレロード</p>
<div id="pane">
<ul id="images">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" target="link-thumbs">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg" target="link-thumbs">ノルディック＠オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d.jpg" target="link-thumbs">ノルディック＠オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3348/3664935456_0ee9b93009.jpg" target="link-thumbs">塩バターキャラメルのクレープ @オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" target="link-thumbs">塩バターキャラメルのクレープ @オ・タン・ジャディス</a></li>
</ul>
<img id="preview" src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" />
</div>
<h2>Rollover Mode</h2>
<p>img要素のsrc属性に指定されている画像ファイル（*.png）とそのロールオーバー画像（*_over.png）をプレロード</p>
<div id="rollover-images">
<img src="/content/img/ro/login.png" alt="ログイン" />
<img src="/content/img/ro/logout.png" alt="ログアウト" />
</div>
<h2>URL Mode</h2>
<p>基準URLと拡張子を配列で指定したファイル名と結合したURLの画像をプレロード</p>
<div id="url-images">
<p>Loading...</p>
</div>
<!-- / CODE -->
</div>
</body>
</html>