Javascript Exif情報は、htmlページの画像を最初にクリックした後にのみ表示されます。

Question

私の問題はかなり特殊ですが、どこでも解決策を見つけることができません。

私は、FileReader（）APIを使用して画像のフォルダをアップロードして表示するサイトを作成しています。画像をクリックすると、画像が最大化され、exif-jsライブラリのEXIF.pretty（）を使用して、Exif情報とGoogleマップが表示されます。私はあなたにコレクションに戻って行く "戻る"ボタンを持っています

私は最初に画像をクリックすると、それはEXIF情報を表示しないが、Googleマップを表示することができます問題です。 2回目以降、すべてが正しく表示されます。これはあらゆる写真に起こります。

これは、私がHTMLにEXIFを書くのjavascriptの一部です：

function writeEXIFData(image, EXIFelem) { 
    var allMetaData = EXIF.pretty(image); 
    console.log(image); 
    var allMetaDataAside = document.getElementById(EXIFelem); 
    var ExifData = document.createElement("div"); 
    ExifData.id = "EXIFData"; 
    allMetaDataAside.appendChild(ExifData); 
    if (allMetaData !== "") { 
     ExifData.innerHTML = allMetaData; 
    } else { 
     ExifData.innerHTML = "NO DATA AVAILABLE"; 
    } 
} 

ファイルはコンソールの出力第1および第2の時間として見えるものの2枚の絵があります。 The second one appears to have more information.But they are the same exact files

これはどうしてですか？私は同じ配列から同じ正確な画像をクリックしています。

ありがとうございます。

編集：マイケル・カムデン：あなたが何を求めているのか理解していれば。 これは、戻りブロックに私のAPIの内側にある：

showImage: function (index, elem, EXIFelem) { 
    document.getElementById(elem).innerHTML = ""; 
    var file = loadedImages[index]; 
    var reader = new FileReader(); 
    reader.onload = (function (file) { 
     return function (event) { 
      // Render thumbnail. 
      var div = document.createElement("div"); 
      div.className = "maximize"; 
      div.innerHTML = ['<img src="', event.target.result, '" title="', encodeURI(file.name), '">'].join(''); 
      document.getElementById(elem).insertBefore(div, null); 
     }; 
    }(file)); 
     // Read in the image file as a data URL. 
     reader.readAsDataURL(file); 
     TIV3446.makePreviousbtn(elem, EXIFelem); 
     TIV3446.showImageDetailedExifInfo(index, EXIFelem); 
     TIV3446.showImageDetailedExifWithMap(index, EXIFelem); 
} 

showImageDetailedExifInfo: function (index, EXIFelem) { 
    EXIF.getData(loadedImages[index], writeEXIFData(loadedImages[index], EXIFelem)); 
} 

EDIT2：私は送信されたコードは、あなたが求めていたものを、おそらくではありません。これもあります：

var i; 
    var file; 
    var reader; 
    for (i = 0; i < loadedImages.length; i += 1) { 
     file = loadedImages[i]; 
     reader = new FileReader(); 
     // Closure to capture the file information. 
     reader.onload = (function (file, index) { 
      return function (event) { 
       // Render thumbnail. 
       var div = document.createElement("div"); 
       div.className = "tile"; 
       div.addEventListener("click", function() {TIV3446.showImage(index, elem, EXIFelem);}); 
       div.innerHTML = ['<img src="', event.target.result, '" title="', encodeURI(file.name), '">', '<div class="info">', encodeURI(file.name).slice(0, -4)].join(''); 
       document.getElementById(elem).insertBefore(div, null); 
      }; 
     }(file, i)); 
     // Read in the image file as a data URL. 
     reader.readAsDataURL(file); 
    } 

Answer 1

この問題が見つかりました。正直に言うとかなり愚かです。

この：

showImageDetailedExifInfo: function (index, EXIFelem) { 
    EXIF.getData(loadedImages[index], writeEXIFData(loadedImages[index], EXIFelem)); 
} 

はこのように書かれている必要があります

showImageDetailedExifInfo: function (index, EXIFelem) { 
    EXIF.getData(loadedImages[index], function() { 
     writeEXIFData(loadedImages[index], EXIFelem) 
    }); 
}