タグ別アーカイブ: setTimeout

時間差で表示する文字列


2014/11/22 追記
時間差で表示する文字列(2)に jQuery 版を掲載しました。
jQuery を使う場合は新しく投稿した方を見てください。

今回は時間差での表示処理についてです。
正直な話、あまり jQuery は使いません(笑)
とある仕事で「使うかも・・・」との打診を受けたのですが、別の表示をする様に変わりました。
必要は無くなりましたが、今後の事を考えて作ってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                $('#obj01').hide(0);
                $('#obj02').hide(0);
                $('#obj03').hide(0);
                $('#obj04').hide(0);
            });

            function dispObject(id) {
                id.show('slow');
            }
            setTimeout("dispObject($('#obj01'))", 1000);
            setTimeout("dispObject($('#obj02'))", 2000);
            setTimeout("dispObject($('#obj03'))", 4000);
            setTimeout("dispObject($('#obj04'))", 5000);


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin      : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="obj01">
                <p>Massage Line 01</p>
            </div>
            <div id="obj02">
                <p>Massage Line 02</p>
            </div>
            <div id="obj03">
                <p>Massage Line 03</p>
            </div>
            <div id="obj04">
                <p>Massage Line 04</p>
            </div>

        </div>

    </body>
</html>

sample

spmple では時間がを置いて四行の文字列が表示されるます。
指定する数字で表示する間隔を変更することができます。
別に画像なども表示する事が出来るため用途は色々広がります。

・・・機能としてはありふれた機能なんですがデザイナーさんが考えると夢が広がる内容ですね。
毎度のことながら私自身の美的センスの無さにはうんざりです・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 2 人中 1 人がこの 投稿 は役に立ったと言っています。

ローディング画像を表示する

今回はローディング中の画像表示をやって見ます。

プラグインもありますが・・・、プラグインを使用するまでも無い場合用です。
今の所は画像の読込中にローディング画像を表示をすることがメインですね。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcDispImage() {

                $('#disp_area').addClass('loading');                
                
                var image    = new Image();
                var img_url  = './image_jpeg.jpg'
                image.src    = img_url;
                image.onload = function () {
                    setTimeout(function(){
                        $('#disp_img').attr('src', img_url);
                        $('#disp_area').removeClass('loading');
                    }, 5000);
                }
                
            }

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area {
                height           : 350px;
                width            : 960px;
            }

            .loading {
                background-image : url('./loading.gif');
                background-repeat: no-repeat;
                background-position: center center;
            }

        --></style>
        
    </head>
    <body>

        <div id="disp_area"><img id="disp_img"></div>

        <input type="button" onclick="funcDispImage();" value="Disp Image">

    </body>
</html>

sample

1.ボタンを押すと、表示画像の読込と、ローディング画像の表示状態にする。
2.表示画像の読込が完了と同時にローディング画像を非表示状態にする。

まぁ、今回はサンプルなんで分かりやすくするため、表示画像の読込が完了してから、
setTimeout を使用してさらに5秒たってからローディング画像を非表示にしています。
そこはご了承ください。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。