javascript - XML 配列を呼び出す JavaScript - 未定義のエラー

Question

私は XML と Javascript の両方にまったく慣れていないので、いくつかの問題を抱えています。少し前に、必要に応じてフレームを個別に制御できるように、gif のフレームである画像の配列を使用して JavaScript コードをいくつか書きました。JSファイルに巨大な配列を含める代わりに、画像にXMLファイルを使用したかったのですが（各gifは38フレームで、6つのgifがありました...）、配列内の画像を呼び出そうとすると/ devDirectory/images/example.jpg の代わりに devDirectory/undefined がコンソールに表示されます。

私が使用しているXMLコードは次のとおりです。

コード：

<?xml version="1.0" encoding="utf-8"?>
<data>
  <directories>
    <imagePath>images/</imagePath>
  </directories>
  <myimages>
    <eyeimage>eyeframes1.jpg</eyeimage>
    <eyeimage>eyeframes2.jpg</eyeimage>
    <eyeimage>eyeframes3.jpg</eyeimage>
-----ETC. (this continues until eyeframes38)-----   
    <stomachimage>stomachframes1.jpg</stomachimage>
    <stomachimage>stomachframes2.jpg</stomachimage>
    <stomachimage>stomachframes3.jpg</stomachimage>
-----ETC. (this continues until stomachframes38)-----
  </myimages>
</data>

JavaScript は次のとおりです。

コード：

 var eyeFrames = new Array;

$(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "xml/sample.xml",
                dataType: "xml",
                success: parseXml
            });
        });
        function parseXml(xml){
            var thumbHtml;
            var imageDir = $(xml).find("directories").find("imagePath").text();
            $(xml).find("eyeimage").each(function(){
                var eyeImage = $(this).find("eyeimage").text();
                thumbHtml = imageDir + eyeImage;            
                eyeFrames.push(thumbHtml);
            });
            playFrames();   
        };
    function playFrames() {
            var i=0;
    setInterval(function() { 
    if(i<38) {
            i++;
            document.getElementById('eye').src = eyeFrames[i].src;
        }
        else {
        i=0;
    }

    }, 720);

}
function checkFrame() {
        if(i=38){
            i=0;
}
}

実際の画像ではなく未定義になっている理由を誰かが理解するのを手伝ってくれたら、それは素晴らしいことです! お時間をいただきありがとうございます:)