プレロード（先読み）｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Search

jQuery pluginプレロード（先読み）


  1. How to create a Visual Image Preloader using jQuery〔ページロード完了後に画像を順番にフェードイン表示〕
  2. Image Loader〔画像の属性を指定可能な画像プレロード〕
  3. jQuery Image Preload Plugin〔戻り値をオブジェクトとして取得可能な画像のプレロード〕
  4. jQuery.Preload〔画像プレロード〕
  5. Lazy Load〔スクロールに応じて徐々に画像を読み込む〕
  6. preloadCssImages〔CSSで定義されている背景画像を自動プレロード〕
  7. Preloading Images with jQuery and JavaScript〔ロード時に画像をキャッシュ〕
  8. QueryLoader〔Flash風のローディング〕
  9. 画像のプレロード〔簡単な方法〕

How to create a Visual Image Preloader using jQuery
ページロード完了後に画像を順番にフェードイン表示

2010/2/14

How to Create a Visual Image Preloader using jQuery

jquery.js

ページロード完了後に指定した間隔で画像をフェードイン表示していく方法が掲載されています。

ページロード時にページ上の画像をすべて隠しておき、完全にページが読み込まれたら、ページ上の画像を上から順に配置されている順にフェードイン表示するようになっています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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">
            $(function(){
                //ページ上の画像をすべて隠す
                $('.image-holder img').hide();
            });
            // 初期化
            var i = 0;
            // IEは固定
            var int=0;
            $(window).bind("load", function() {
                // ページが完全に読み込まれたときにロードイベント発生
                // 画像を0.5秒間隔でフェードイン表示
                var int=setInterval("doThis(i)",500);
            });
            function doThis() {
                // 画像数
                var imgs = $('.image-holder img').length;
                if (i >= imgs) {
                    // 最後の画像でタイマークリア
                    clearInterval(int);
                }
                // 0.5秒間隔で隠していた画像をフェードイン表示
                $('.image-holder img:hidden').eq(0).fadeIn(500);
                i++;
            }
        </script>
        <!-- CSS -->
        <style type="text/css">
            .image-holder {
                float:left;
                display:inline;
                width:320px; height:240px;
                display:block;
                margin:10px;
                border:5px solid #333;
                -webkit-border-radius:5px;-moz-border-radius:5px;
                background:#333 url("/content/img/ajax/loading_black.gif") 50% 50% no-repeat;
            }
            .image-holder img {
                width:320px; height:240px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://dinolatoga.com/2009/04/26/how-to-create-a-visual-image-preloader-using-jquery/'>How to Create a Visual Image Preloader using jQuery</a></p>
<!-- CODE -->
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" /></div>
            <div class="image-holder"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg" /></div>
            <br clear="all" />
<!-- / CODE -->
        </div>
    </body>
</html>

Image Loader
画像の属性を指定可能な画像プレロード

2010/2/14

Image Loader

MIT
jquery.js、jquery.imageLoader.js v1.1

画像の属性を指定して、画像をプレロードできるjQueryプラグイン。

画像のURL（src）、タイトル（title）、名前（name）、ID名（id）、クラス名（class）など、画像の属性を連想配列で指定します。 プレロードした画像をjQuery Cycle Lite Pluginを使用してスライドショー表示するサンプルが掲載されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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.imageLoader.1.1.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.cycle.lite.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#slideShow").imageLoader(
                    {
                        images: [
                            { src: 'http://farm4.static.flickr.com/3214/3142429603_9f5899513e_o.jpg', title:'サザンテラスのイルミネーション1' },
                            { src: 'http://farm4.static.flickr.com/3089/3143248598_ef0dfe425e_o.jpg', title:'サザンテラスのイルミネーション2' },
                            { src: 'http://farm4.static.flickr.com/3244/3142386073_2997e55c5e_o.jpg', title:'サザンテラスのイルミネーション3' },
                            { src: 'http://farm4.static.flickr.com/3113/3142386067_4a9dbc9844_o.jpg', title:'サザンテラスのイルミネーション4' }
                        ]
                    },
                    function(){
                        $('#slideShow').cycle({
                            fx: 'fade',
                            speed: 1000,
                            timeout: 3000,
                            random:  1
                        });
                    }
                );
            });
        </script>
        <style type="text/css">
            #imageLoaderSplashArea {
                width: 640px; height:480px;
                text-align:center;
                vertical-align:middle;
            }
                #imageLoaderSplashArea .splashScreenImage {
                    border: none;
                    margin-top:230px;
                }
                #imageLoaderSplashArea .loadingText {
                    text-align: center;
                }
            #slideShowContainer {
                width: 640px; height:480px;
                text-align: center;
                padding:5px;
                border:1px solid #333;
                -webkit-border-radius:10px;-moz-border-radius:10px;
                background:#333;
            }
                #slideShow {
                    margin: auto;
                }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://orionseven.com/imageloader/'>Image Loader</a></p>
<!-- CODE -->
            <div id="slideShowContainer">
                <div id="slideShow"></div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Image Preload Plugin
戻り値をオブジェクトとして取得可能な画像のプレロード

2010/2/14

jQuery Image Preload Plugin

MIT
jquery.js、jquery.imgpreload.js

単一あるいは複数の画像のプレロードを行い、戻り値をimg要素あるいはオブジェクトとして取得することができるjQueryプラグイン。 戻り値は「this」で参照できます。 オブジェクトとして取得した場合、「each」コールバックなら画像のURLはthis.srcで取得可能です。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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.imgpreload.js"></script>
        <script type="text/javascript">
            $(function(){
                /* demo1 */
                $.imgpreload('http://farm3.static.flickr.com/2526/4196070281_0a93789862_s.jpg',function()
                {
                    // this = new image object
                    // callback
                    $("#demo1").append(this);
                });
                /* demo2 */
                $.imgpreload(['http://farm3.static.flickr.com/2526/4196070281_0a93789862_s.jpg','http://farm3.static.flickr.com/2689/4196824214_fdcf872e3d_s.jpg','http://farm3.static.flickr.com/2429/4196824188_28af5aaed7_s.jpg'],function()
                {
                    // this = array of new image objects
                    // callback executes when all images are loaded
                    $("#demo2").append(this);
                });
                /* demo3, demo4 */
                $.imgpreload(['http://farm3.static.flickr.com/2526/4196070281_0a93789862_s.jpg','http://farm3.static.flickr.com/2689/4196824214_fdcf872e3d_s.jpg','http://farm3.static.flickr.com/2429/4196824188_28af5aaed7_s.jpg'],
                {
                    each: function()
                    {
                        // this = new image object
                        // callback executes on every image load
                        $("#demo3").append("<li><img src='"+this.src+"' /></li>");
                    },
                    all: function()
                    {
                        // this = array of new image objects
                        // callback executes when all images are loaded
                        //$("#demo4").append(this);
                        for(var i=0; i<this.length; i++){
                            $("#demo4").append(this[i]);
                        }
                    }
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul { margin:0 0 10px 0; padding:0; overflow:hidden; }
            li { float:left; margin:0; padding:0; display:block; width:75px; height:75px; list-style:none; display:inline; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://farinspace.com/2009/05/jquery-image-preload-plugin/'>jQuery Image Preload Plugin</a></p>
<!-- CODE -->
            <h2>画像のプレロード（単一）</h2>
            <div id="demo1"></div>
            <h2>画像のプレロード（複数）</h2>
            <div id="demo2"></div>
            <h2>画像のプレロード（オブジェクトとして取得）</h2>
            <ul id="demo3"></ul><br clear="all" />
            <div id="demo4"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery.Preload
画像プレロード

2010/2/14

jQuery.Preload

jquery.js、jquery.preload.js

4つのモードで画像プレロードを行えるコールバック関数付きのjQueryプラグイン。

コールバック関数があるので、プレロードの進捗状況を表示したり、エラー発生時の処理、プレロード完了後のアクションなどを細かく指定することができます。

  • Placeholder Mode
    img要素のsrc属性に指定されている画像ファイルをプレロード。進捗状況表示。読み込み中はデフォルト画像、画像ファイルが存在しない場合はNot Found画像を表示。
  • Link Mode
    a要素のhref属性に指定されている画像ファイルをプレロード。
  • Rollover Mode
    img要素のsrc属性に指定されている画像ファイル（*.png）とそのロールオーバー画像（*_over.png）をプレロード。
  • URL Mode
    基準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>
    </head>
    <body>
        <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>

Lazy Load
スクロールに応じて徐々に画像を読み込む

2010/2/14

Lazy Load

MIT
jquery.js、jquery.lazyload.js

画面がスクロールされた時に画像の読み込みを開始するjQueryプラグイン。 ロード時は、ウィンドウに表示されている範囲の画像を読み込み、それより下にある画像は画面のスクロールに応じて順に読み込みます。

サイズが大きい画像を複数配置するページなど、全画像を読み込むのに時間がかかるページにおいて、ページの上に配置された画像から徐々に画像を読み込んでいく方法はサーバーにかかる負担も軽減できますね。

ページ内にタイル上に画像を敷き詰めたページ、横スクロースする幅広レイアウトページ、ある要素内で広範囲のコンテンツをスクロールさせて表示するページにも適用可能です。

placeholder : '/content/img/grey.gif'には、デフォルトの背景パターン画像を指定します。
effect: 'fadeIn'を指定すると、画像のロード時にフェードイン効果をつけることができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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.lazyload.js"></script>
        <script type="text/javascript">
            $(function(){
                $("img").lazyload({
                    placeholder : "/content/img/ajax/grey.gif",
                    effect      : "fadeIn"
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            body {
                background:#fff;
            }
            #demo a {
                display:block;
                width:650px; height:490px;
                text-align:center;
                margin:10px;
            }
             #demo img {
                border: 1px solid #999;
                margin:0; padding:5px;
                width:640px; height:480px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://www.appelsiini.net/projects/lazyload/enabled_fadein.html'>Lazy Load</a></p>
<!-- CODE -->
            <div id="demo">
                <a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_49f9e56d5c_o.jpg" width="640" height="480" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a>
                <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_de3437ced9_o.jpg" width="640" height="480" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
                <a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_a85934303c_o.jpg" width="640" height="480" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a> 
                <a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3316/3273696493_d2e819c7f5_o.jpg" width="640" height="480" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

preloadCssImages
CSSで定義されている背景画像を自動プレロード

2010/2/14

jQuery Script to Automatically Preload images from CSS

MIT＆GPL
jquery.js、preloadCssImages.jQuery_v4.js

CSSで定義されている背景画像を自動的にプレロードするjQueryプラグイン。

インラインおよび外部CSSファイルにおいて、background-imageプロパティで指定されている画像をすべて読み込みます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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/preloadCssImages.jQuery_v4.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#loadInfo').hide();
                $('button').click(function(){
                    $('#loadInfo').slideDown();
                    $(this).parent().after('<h2>Images loaded into DOM from CSS:</h2><ul id="loadedImgs"></ul>')
                    var loadedImgs = $.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
                    for(var i = 0; i<loadedImgs.length; i++){
                        $('#loadedImgs').append('<li><img src=\"'+loadedImgs[i].src+'\" />: '+loadedImgs[i].src+'</li>');
                    }
                    //    $(window.parent.document).find('iframe:eq(0)').height('110em');
                    return false;
                });
            });
        </script>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <style type="text/css">
            body { text-align:left; margin:20px; background:none; }
            h1 { padding:0; }
            button { border:1px solid #333; -webkit-border-radius:5px; -moz-border-radius:5px; margin:10px 0; padding:5px 10px; color:#fff; font-weight:bold; background-color:#999; }
            /* status */
            #statusBar {border: 2px solid #aaa;width: 300px;background: #ddd url("/content/img/ajax/dadada_40x100_textures_06_inset_hard_95.png") 50% repeat-x;}
            #status {background: url("/content/img/ajax/f58705_40x100_textures_08_diagonals_thick_85.png") 0 50% no-repeat; height: 12px; }
            #textStatus {font-weight: bold; }
            #textStatus  .numLoaded {font-weight: bold;}
            #textStatus .numTotal {font-weight: bold;}
            #textStatus .percentLoaded {font-weight: bold;}
            #textStatus .currentImg {font-weight: bold; display: block;font-size: .8em;}
            #textStatus .currentImg span {font-weight: normal;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/'>jQuery Script to Automatically Preload images from CSS</a></p>
<!-- CODE -->
            <div id="loadInfo"> 
                <p id="textStatus"></p> 
                <div id="statusBar"><div id="status"></div></div> 
            </div>
            <p><button>画像をプレロードする</button></p>
<!-- / CODE -->
        </div>
    </body>
</html>

Preloading Images with jQuery and JavaScript
ロード時に画像をキャッシュ

2010/2/14

Preloading Images with jQuery and JavaScript

jquery.js

ページロード時に指定した画像をプレロードし、生成したimg要素をキャッシュしておく方法が掲載されています。

設置サンプルサンプルを見る
<!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">
            (function($) {
              var cache = [];
              // 引数に画像URLを配列で渡す
              $.preLoadImages = function() {
                var args_len = arguments.length;
                for (var i = args_len; i--;) {
                  var cacheImage = document.createElement('img');
                  cacheImage.src = arguments[i];
                  cache.push(cacheImage);
                }
//                console.log(cache);
                return cache;
              }
            })(jQuery)
            $(function(){
                var imgs=$.preLoadImages("http://farm4.static.flickr.com/3514/3274514408_49f9e56d5c_o.jpg", "http://farm4.static.flickr.com/3509/3273696567_de3437ced9_o.jpg");
                $("#wrap").append(imgs);
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript'>Preloading Images with jQuery and JavaScript</a></p>
            <p>▼キャッシュした画像を出力</p>
<!-- CODE -->
<!-- / CODE -->
        </div>
    </body>
</html>

QueryLoader
Flash風のローディング

2010/2/14

QueryLoader - preload your website in style

jquery.js、queryLoader.js

ページ全体、あるいはページの一部をプレロードするFlashのローディングのようなことができるjQueryプラグイン。

img要素やCSSで指定した背景画像など、すべての画像を取得してページ全体の読み込みが完了してからページが表示されます。 ロード中は、ページ全体がローディング画面となり、横に伸びるローディングバーで進捗を表示します。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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/queryLoader.js"></script>
        <script type="text/javascript">
            $(function(){
                QueryLoader.selectorPreload = "body";
                QueryLoader.init();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .QOverlay {
                background-color: #000;
                z-index: 9999;
            }
            .QLoader {
                background-color: #ccc;
                height: 1px;
            }
            body {
                margin:0; padding:0;
            }
            #wrap {
                margin:20px;
            }
            #demo a {
                display:block;
                width:650px; height:490px;
                text-align:center;
                margin:10px;
            }
             #demo img {
                border: 1px solid #999;
                margin:0; padding:5px;
                width:640px; height:480px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/'>QueryLoader - preload your website in style</a></p>
<!-- CODE -->
<div id="demo">
    <a href="http://www.flickr.com/photos/22559849@N06/3274514408/"><img src="http://farm4.static.flickr.com/3514/3274514408_49f9e56d5c_o.jpg" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a>
    <a href="http://www.flickr.com/photos/22559849@N06/3273696567/"><img src="http://farm4.static.flickr.com/3509/3273696567_de3437ced9_o.jpg" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
    <a href="http://www.flickr.com/photos/22559849@N06/3273696469/"><img src="http://farm4.static.flickr.com/3427/3273696469_a85934303c_o.jpg" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a> 
    <a href="http://www.flickr.com/photos/22559849@N06/3274514302/"><img src="http://farm4.static.flickr.com/3396/3274514302_450a830d47_o.jpg" alt="アボカドディップ@アボガドダイニング Platinum Lounge" /></a>
    <a href="http://www.flickr.com/photos/22559849@N06/3273696401/"><img src="http://farm4.static.flickr.com/3324/3273696401_338429848f_o.jpg" alt="フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge" /></a>
    <a href="http://www.flickr.com/photos/22559849@N06/3273696493/"><img src="http://farm4.static.flickr.com/3316/3273696493_d2e819c7f5_o.jpg" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a>
</div>
<!-- / CODE -->
        </div>
    </body>
</html>

画像のプレロード
簡単な方法

unknown

jquery.js

jQueryを使用して、画像のプレロードを行うことができます。 指定した画像URLからimg要素を生成し、そのimg要素がロードされた時にページのDOM要素に追加していきます。

設置サンプルサンプルを見る
<!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">
            $(function(){
                $urls=['http://farm3.static.flickr.com/2526/4196070281_0a93789862_s.jpg','http://farm3.static.flickr.com/2689/4196824214_fdcf872e3d_s.jpg','http://farm3.static.flickr.com/2429/4196824188_28af5aaed7_s.jpg'];
                for(var i=0; i<$urls.length; i++){
                    var src=$urls[i];
                    $('<img />')
                        .attr('src', src)
                        .load(function(){
                            $("#demo").append($(this));
                        });
                }
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
<!-- CODE -->
<div id="demo"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop