For loop breaks when it encounters an image that doesn't exist
<p>I am trying to load a series of images inside a div using for loop and when the file does not exist, the <code>for</code> loop breaks. This code doesn't seem to work.</p>

<p>I've tested many others but no success. Any tips?</p>

<p>HTML:</p>

<pre><code>&lt;div id="project_img"&gt;
&lt;/div&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>function load_projects()
  var project_array = new Array();
  var project_name;

  for(var i = 0; i &lt; 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();
});
</code></pre>
