存在しない画像に遭遇した場合のループブレイク

Question

forループを使用してdiv内に一連の画像をロードしようとしていますが、ファイルが存在しないときはforループが壊れます。このコードは機能していないようです。

私は多くの他のものをテストしましたが、成功しませんでした。任意のヒント？

HTML：

<div id="project_img"> 
</div> 

はJavaScript：

function load_projects() 
    var project_array = new Array(); 
    var project_name; 

    for(var i = 0; i < 7; i++) { 
    project_array.push(new Image()); 

    project_name = "project_" + i; 

    project_array[i].src = "images/" + project_name + ".png"; 
    project_array[i].id = project_name; 

    $("#project_img").append(project_array[i]); 

    $("#" + project_name).error(function() { 
     alert(i); 
     i = 7; 
    }) 
    } 
} 

$(document).ready(function() { 
    load_projects(); 
}); 

Answer 1

をお試しください0から7まで続く）。

現在のイメージをロードする際にエラーがない場合は、次のイメージのロードを開始するには、戦略を変更する必要があります。成功コールバックが必要です。現在の画像がロードされていなく、すべての画像が表示されていた

$("...").load(function() { ... }); 

場合、次のロードを開始：画像が正常にロードされている場合jQuerys loadメソッドは、コールバックを設定するために使用することができる

$("#" + project_name).load(function() { 
    if (i < 7) { 
     load_projects(i + 1); 
    } 
}); 

ループが不要になるので、forループはもう必要ありません。

var project_array = new Array(); 

function load_projects(i) { 
    project_array.push(new Image()); 
    project_array[i].id = "project_" + i; 
    project_array[i].src = "images/" + project_array[i].id + ".png"; 

    $("#project_img").append(project_array[i]); 

    $("#" + project_array[i].id).load(function() { 
     if (i < 7) { 
      load_projects(i + 1); 
     } 
    }); 
} 

$(document).ready(function() { 
    load_projects(0); 
}); 

必要ありませんが、あなたは再びエラーコールバックを追加することができますしたい場合：完全なコードがある

... 
    $("#" + project_array[i].id).error(function() { 
     alert('error at ' + i); 
    }); 
    ... 

をまた、私jsfiddleを参照してください。 （そこに私は既存のイメージを1つ追加しました）

Answer 2

問題はforループが終了した後にエラーコールバックは（と呼ばれること、である。この

function drawImage(i) { 

project_array.push(new Image()); 

var project_name = "project_" + i; 

project_array[i].src = "images/" + project_name + ".png"; 
project_array[i].id = project_name; 

$("#project_img").append(project_array[i]); 

$("#" + project_name).load(function() { 
    if (i + 1 < 7) 
    drawImage(i + 1); 
}) ; 
} 

$(document).ready(function() { 
    drawImage(0); 
}); 

var project_array = new Array();