Symfoware

Symfowareについての考察blog

JavaScriptで画像のキャッシュ(事前読み込み)を行う

漫画の閲覧に特化した画像ビューアーを構想中・・・
jQueryを使用し、表示する画像を切り替える
jQueryを使用し、キーボード操作で表示する画像を切り替える
jQueryでJSON形式のファイルを読み込み、内容に従って画像表示
jQueryでURLパラメーターを取得し、ロードするJSONファイルを切り替える


今回は、事前に画像を読み込む機能をつけて見ました。


サンプルソース




<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Image Viewer</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    
    //ブラウザの表示領域取得用
    function getClientHeight(){
        var client = getClient();
        return client.clientHeight;
    }
    
    function getClient(){
        if(!!(window.attachEvent && !window.opera) && document.compatMode == 'CSS1Compat'){
            return document.documentElement;
        } else if(!!(window.attachEvent && !window.opera)){
            return document.body;
        } else{
            return document.documentElement;
        }
    }
    
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    
    //var image_list = [];
    var index = 0;
    var image_table = null;
    
    function next(){
        if (index + 2 < image_table.length) {
            index += 2;
            showImage();
        }
    }
    function prev(){
        if (1 < index) {
            index -= 2;
            showImage();
        }
    }

    function showImage(){
        $("#img_right").attr("src", image_table[index].src);
        $("#img_left").attr("src", image_table[index + 1].src);
    }
    $(function(){
    //$(document).ready( function() {
        //表示に使用するデータを取得
        
        var target = "./data/view.json";
        url_vars = getUrlVars();
        if (url_vars["l"]) {
            target = "./data/" + url_vars["l"] + ".json";
        }
        
        $.getJSON(target, function(json){
            var image_list = json;
            
            //画像の高さをブラウザの表示領域にあわせる
            var height = getClientHeight();
            $("#img_right").attr("height", height - 50);
            $("#img_left").attr("height", height - 50);
            
            
            //画像のキャッシュ開始
            image_table = new Array(json.length);
            for (var i = 0; i < json.length; i++) {
                image_table[i] = new Image();
                image_table[i].src = json[i];
            }
            
            //画像の初期表示
            showImage();
        });
        
        
        // 次へボタンが押されたとき
        $("#next").click(function(){
            next();
        });
        
        //前へボタンが押されたとき
        $("#prev").click(function(){
            prev();
        });
        
        //キーイベントを設定
        $("body").keyup(function(e){
            switch(e.which) {
            //← キー
            case 37:
                next();
                break;
            //→ キー
            case 39:
                prev();
                break;
            }
        });
    });
    </script>
</head>
<body>
<div align="center">
<div>
<img id="img_left">
<img id="img_right">
</div>
<div><input type="button" id="next" value="次へ"><input type="button" id="prev" value="前へ"></div>
</div>
</body>
</html>



jsonのデータを取得した後、画像のキャッシュを行っています。
本来であれば、最初の2ページがキャッシュできたら画面を表示し、
残りの画像は裏で取得するようにすべきなのでしょうが、とりあえず。




【参考URL】
ハイパーリンクにカーソルが触れるとアイコンを変化させる(複数編)







関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/08/31(火) 12:10:37|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ