設置サンプル
PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

【参照】jQuery.Preload
Replaceholder Mode

img要素のsrc属性に指定されている画像ファイルをプレロード
Done: 0/?
0 were loaded successfully.
0 couldn't be loaded.
Last loaded: none
Loading: none
Link Mode

a要素のhref属性に指定されている画像ファイルをプレロード
Rollover Mode

img要素のsrc属性に指定されている画像ファイル（*.png）とそのロールオーバー画像（*_over.png）をプレロード
URL Mode

基準URLと拡張子を配列で指定したファイル名と結合したURLの画像をプレロード
設置サンプルのソース

<!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 &amp; 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:&nbsp;<span id="done">0</span>/<span id="total">?</span></p>
               <p><span id="loaded">0</span>&nbsp;were loaded successfully.</p>
               <p><span id="failed">0</span>&nbsp;couldn't be loaded.</p>
               <p>Last loaded:&nbsp;<span id="image-loaded">none</span></p>
               <p>Loading:&nbsp;<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>