50507


javascript初心者です

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

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

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

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

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

[code]

    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;
            } 
        }
    }
[/code]


CC BY-SA 4.0
2018-11-21T00:57:41.380
50483
2018-11-21T09:24:17.797
2018-11-21T04:15:52.773
question
javascript jquery 画像
javascriptで画像が存在するかどうか判定したい


Imageオブジェクトの画像読み込みは非同期実行なので「if(img.width > 0)」のタイミングでロードが完了しているとは限りません。  
ですので質問のコードは画像の読み込み状況に関係なく判断しようとしてしまいます。  
ループで複数の連番ファイルを確認する場合は成功レスポンスを待ってから次を確認してください。

ちなみによくある画像の存在を判別する方法は下記の2パターンです。  
・Imageオブジェクトを利用して判別  
・XMLHttpRequestのHTTPレスポンスコードで判別

下記に両方の例がありますので参考にしてください。  
[JavaScriptで任意URLに画像が存在しているかを判定したい。](https://ja.stackoverflow.com/questions/24332/)

適当ですがループを回す例も置いておきますね  

[code]

    var ImagePath = new Array();
    function imgCHK(num,cnt,url) {
     var img = new Image();
     img.onload = function()  { 
      /* 読み込み成功時の処理 */
      console.log('成功：'+url);
      ImagePath.push(url);
      cnt++;
      getImagePath(num,cnt);
     }
     img.onerror = function() {
      /* 読み込み失敗時の処理 */
      console.log('失敗：'+url);
     }
     img.src = url;
    }
    function getImagePath(num,cnt){
     imgCHK(num,cnt,"img/" + num + "/picture" + cnt + ".png");
    }
    getImagePath(1,1);
[/code]


CC BY-SA 4.0
2018-11-21T09:24:17.797
50507
2018-11-21T09:24:17.797
19995
50483
answer