タグ別アーカイブ: onload

onload 読み込み済み判定について

現在作成中のサイトですが、画像のアップロードを画面遷移無しで行う計画です。
アップロードまでは問題なく動作しましたが、プレビューがうまく動作しません。
どうもブラウザによっては onload は、読み込み済みの画像を再度 load させても正常に動作してくれないんですね・・・

実は若干仕様が変わったため、別のパラメータに画像の有無を保持することになったため、
この処理は不要になったのですが、このままだとちょっとモヤモヤします。
ということで今回はその部分を解決してみたいと思います。

<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() {

                var img_url = './icon_jpeg05.jpg';
                    
                // Action 1
                var image1 = new Image();
                $('#get_button1').click( function () {
                    image1.src = img_url;
                    image1.onload = function () {
                        $('#set_image1').attr('src', image1.src);
                        alert('Image1 On Load');
                    }

                });


                // Action 2
                var image2 = new Image();
                $('#get_button2').click( function () {
                    image2.src = img_url;
                    if (image2.width > 0) {
                        $('#set_image2').attr('src', image2.src);
                        alert('Image2 Width' + image2.width);
                    } else {
                        image2.onload = function () {
                            $('#set_image2').attr('src', image2.src);
                            alert('Image2 On Load');
                        }
                    }
                });

            });

        --></script>

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

            div {
                margin  : 20px;
            }

        --></style>

    </head>

        <div id="disp_area">

            <div>
                <h1>Action 1 Image</h1>
                <img id="set_image1" src="" />
                <button id="get_button1">Click Image 1 Load!!!</button>
            </div>

            <div>
                <h1>Action 2 Image</h1>
                <img id="set_image2" src="" />
                <button id="get_button2">Click Image 2 Load!!!</button>
            </div>

        </div>

    </body>
</html>

sample2

spmple の Button を Click すると画像をロードするはずです。
「Action 1 Image」の button ではブラウザによっては一度表示すると、もう表示してくれなくなります。
「Action 2 Image」の button では正常キャッシュを読み込んだ場合はサイズイメージを表示します。
 ※ 実際に読み直しが発動しているかの判定のため alert を実行しています。

これでアップロードしたファイル名が同じ画像でも、プレビュー処理の更新が正常に動作するはずです。
要はすでに存在している場合はロードする必要がないんですね。
仕様が変わる前に気がつかなかったのが若干悔しいですね。

今までは、同一ページ内で同じ名前の画像ファイルを繰り返し読み込むことがなかったため、
最初は原因が分からずに苦労しました。
とりあえず、今後は同じことが起きても対応出来そうです。

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

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

サムネイル選択でメイン画像の変更

今回はサムネイル画像を選択したときにメイン画像の変更です。
メイン画像の変更は横スライドさせてみたいと思います。

<html>
<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"><!--;

            // default image
            $('body').ready( function() {

                var i_load    = new Array();
                    i_load&#91;1&#93; = new Image;
                    i_load&#91;2&#93; = new Image;
                    i_load&#91;3&#93; = new Image;
                    i_load&#91;4&#93; = new Image;

                var image     = new Array();
                    image&#91;1&#93;  = './image_jpeg01.jpg';
                    image&#91;2&#93;  = './image_jpeg02.jpg';
                    image&#91;3&#93;  = './image_jpeg03.jpg';
                    image&#91;4&#93;  = './image_jpeg04.jpg';

                    i_load&#91;1&#93;.src = image&#91;1&#93;;
                    i_load&#91;1&#93;.onload = function () {};
                    i_load&#91;2&#93;.src = image&#91;2&#93;;
                    i_load&#91;2&#93;.onload = function () {};
                    i_load&#91;3&#93;.src = image&#91;3&#93;;
                    i_load&#91;3&#93;.onload = function () {};
                    i_load&#91;4&#93;.src = image&#91;4&#93;;
                    i_load&#91;4&#93;.onload = function () {};


                // default image
                $('#div_before img').attr('src', image&#91;1&#93;);
                $('#div_after img').attr('src', image&#91;1&#93;);


                // thumb_img click
                $('#thumb_area div img').click( function() {

                    // animate stop
                    $('#div_before').stop(true, true);
                    $('#div_after').stop(true, true);

                    // default position
                    beforeWidth = $('#div_before').width();
                    $('#div_before').css('left', 0);
                    $('#div_after').css('left', beforeWidth);

                    // after src set
                    no = $(this).attr('value');    // get no
                    $('#div_after img').attr('src', image&#91;no&#93;);

                    // exec slider
                    $('#div_before').animate(
                        {
                            left    : (beforeWidth * -1)
                        },
                        {
                            duration: 'slow',
                            complete: function() { $('#div_before img').attr('src', image&#91;no&#93;); }
                        }
                    );
                    $('#div_after').animate(
                        {left: 0},
                        {
                            duration: 'slow'
                        }
                    );

                });

            });

        --></script>

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

            body {
                margin           : 20px;
            }

            #main_area  {
                position         : relative;
                margin           : 0 auto;
                height           : 350px;
                width            : 960px;
                overflow         : hidden;
            }
            
            #main_area div {
                position         : absolute;
            }
            
            #thumb_area {
                margin           : 0 auto;
                width            : 960px;
            }

            #thumb_area div {
                float            : left;
                margin           : 10px 100px;
                background-color : #cccccc;
            }

        --></style>
        
    </head>
    <body>
        <div id="main_area">
            <div id="div_before"><img src=""></div>
            <div id="div_after" ><img src=""></div>
        </div>
        
        <div id="thumb_area">
            <div><img src="./thumb_png01.png" value="1"></div>
            <div><img src="./thumb_png02.png" value="2"></div>
            <div><img src="./thumb_png03.png" value="3"></div>
            <div><img src="./thumb_png04.png" value="4"></div>
        </div>
        
    </body>
</html>

sample

これで選択したサムネイルによって、メイン画像が切り替わったかと思います。
元画像と選択画像は animate を使用してスライド表示しています。

元画像は、animate 処理が完了した後に、選択画像に画像変更を行います。
コレで次の画像をクリックした時の前準備をしています。

なお、同一画像のクリックチェックは入れていないので、必要な方は随時入れてください。
※クリック後に取得した no 変数あたりを触れば何とかなるはずです。

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

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

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

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

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

<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 人がこの 投稿 は役に立ったと言っています。