FileApi - ニート=>ネトゲ屋=>ブラック=>電話屋

メモリ食い過ぎ。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <script>
      function readFile(){
        var elemMain = document.getElementById("main");
        var fileData = document.getElementById("file").files[0];
        elemMain.innerHTML += fileData.size;
        var reader = new FileReader();
        reader.onload = function(evt){
          console.log("read");
          txt = evt.target.result;
          console.log(txt);
          dataAr = eval(txt.replace("\n",""));
          console.log(dataAr[0]);
          setAr(dataAr);
          getNext();
        }
//        reader.readAsText(fileData, "utf-8");
        reader.readAsBinaryString(fileData);
      }

      function setAr(ar){ linklist.ar = ar; }

      var linklist = {
        ar : new Array(),
        index : 0,
        index2: 0,
        Next : function(){
          this.index += 1;
          if(this.ar.length <= this.index){
              this.index = 0;
          }
          emit = this.ar[this.index]
          return emit;
        },
        Prev : function(){
          this.index -= 1;
          if(0 > this.index){
              this.index = this.ar.length - 1
          }
          emit = this.ar[this.index]
          return emit;
        },
        DryNext : function(){
          this.index2 += 1;
          if(this.ar.length <= this.index2){
              this.index2 = 0;
          }
          emit = this.ar[this.index2]
          return emit;
        },
        DryPrev : function(){
          this.index2 -= 1;
          if(0 > this.index2){
              this.index2 = this.ar.length - 1
          }
          emit = this.ar[this.index2]
          return emit;
        }
      };
        
      plAr= new Array();
          
      function poolImg(url){
          console.log(url);
          if(!plAr[url]){
            img = new Image();
            img.src = url;
            console.log(img);
            plAr[url] = img;
          }
      }
          
      function imgTag(url){
         if(plAr[url]){
          console.log("cache hit");
         }
         //fast
         html = '<img src="#{url}" class="" alt="" />'.replace('#{url}',url);
         document.getElementById("main").innerHTML = html;
         //slow document.getElementById("canvas").src = url;
      }
      
      function getPrev(){
         url = linklist.Prev();
         imgTag(url);
         for(var i=0;i < 5;i++){
           poolImg(linklist.DryPrev());
         }
      }
        
      function getNext(){
         url = linklist.Next();
         imgTag(url);
         for(var i=0;i < 5;i++){
           poolImg(linklist.DryNext());
         }
      }
        
      document.onkeydown = function(e) {
         var shift, ctrl; 
         keycode = e.which; 
         key = String.fromCharCode(keycode);
         switch(key){
            case "'":
               getNext();break;
            case '%':     
               getPrev();break;
           default:
               break;
         }
      }
     </script> 
    
  </head>
  <body>
<h1>FileApi=>eval=>switch img tag=>メモリ食い過ぎ。</h1>
<p>keybind ←prev  next→</p>
<p>読み込んで=>readしてブラウズする</p>
<input type="file" id="file" />
<input type="button" value="read" onclick="readFile();return false;"/>
<input type="button" value="prev" onclick="getPrev();return false;" />
<input type="button" value="next" onclick="getNext();return false;" />
<div id="main">&nbsp;</div>
<hr>    
<h2>説明</h2>
<p>
  配列な文字列のファイルを読んでevalしてimgタグにする<br>
  1.ローカルファイルのブラウジングをする場合はFirefoxでhtmlをドラッグアンドドロップで実行するとよい。<br/>
  ローカルファイルのリストを作る 
  <pre>
  >cd YOUR PICTURE DIRECTORY
  >echo "[" > test.txt && find `pwd` -name "*.jpg" -exec echo "\"{}\"," \; >> test.txt && echo "]" >> test.txt      
  </pre>
  </p>
<p>
  2.1patu.netなどをブラウズして試すときはwebサーバー経由なのでchromeでも可能っぽい。
  (1patu.netはwebアクセスに基づくクッキーが必要なので予め1度webアクセスしておくこと。<a href="http://1patu.net/data/2000/preview/000.jpg" target="_blank">こういうの</a>)
</p>
<p>
  読み込むファイルのサンプルはこういうの
<pre>
[
"http://1patu.net/data/18001/preview/000.jpg",
"http://1patu.net/data/18001/preview/001.jpg",
"http://1patu.net/data/18001/preview/002.jpg",
"http://1patu.net/data/18001/preview/003.jpg",
"http://1patu.net/data/18001/preview/004.jpg",
"http://1patu.net/data/18001/preview/005.jpg",
"http://1patu.net/data/18001/preview/006.jpg",
"http://1patu.net/data/18001/preview/007.jpg",
"http://1patu.net/data/18001/preview/008.jpg",
"http://1patu.net/data/18001/preview/009.jpg",
"http://1patu.net/data/18001/preview/010.jpg",
]
</pre>  
</p>  

</body>
</html>