javascriptで画像が存在するかどうか判定したい

javascript初心者です

画像が存在するかどうか判定し、存在すればその画像のパスを配列に格納する関数を作っています

画像はpicture1.png、picture2.png、picture3.pngのように連番で存在しています

HTMLImageElement オブジェクトを作成して画像のパスを挿入し、
widthの値が０より大きいなら画像のパスは存在すると判定して配列に画像のパスを格納する仕組みです

ですがこれだと正常に画像あると判定される場合と判定しない場合があり、
動作が安定しません
画像は確実にパス上に存在するのですが、例えばpicture1.pngからpicture7.pngまで存在するにも関わらず、
picture1.pngで画像がないと判定されたり、picture6.pngのところで画像がないと判定されたり、
正常に判定されない場合の動作に一貫性がありません

問題点のご指摘、もしくはもっといい方法があれば教えていただきたいです
PHPではファイル名一覧を取得できるのは存じてますが、サーバー上の都合でjavascript、jqueryで
実現できないかと考えています
よろしくお願いいたします

var ImagePath = new Array();

function getImagePath(){
    var num = 1;
    var cnt = 1;
    while(true){
        var img = new Image();
        img.src = "img/" + num + "/picture" + cnt + ".png";
        if(img.width > 0){
            console.log("img/" + num + "/picture" + cnt + ".png"　+ "のパスの画像は存在します");
            ImagePath.push("img/" + num + "/picture" + cnt + ".png");
            cnt++;
        }
        else if(img.width == 0){
            console.log("img/" + num + "/picture" + cnt + ".png"　+img.src　+ "のパスの画像は存在しません");
            cnt = 1;
            break;
        } 
    }
}