Javascript variable problem
<p>I have an array of strings in Javascript that I need to use to load images in my page via AJAX. After each image is loaded, I need to perform some additional tasks such as sending a HTTP request which will actually delete the image.</p>

<p>This is what I have so far.</p>

<pre><code>for (x in images) {
    var img = new Image();
    $(img)
        .load(function(){
            $('#image_'+images[x]).html(''); //remove loading gif
            $('#image_'+images[x]).append(this);
            $.post('/images/destroy_image',{id:images[x]});
        })
        .attr('src', '/images/get_image?id='+images[x]);
}
</code></pre>

<p>This code works fine if there is only 1 string in the <code>images</code> array.</p>

<p>If there is more than 1, when an image finishes loading and its <code>load</code> function is run, any reference to <code>images[x]</code> in its <code>load</code> function now point to the final string in the <code>images</code> array, when I need it to be the value it was when the loop was being run. </p>

<p>Eg.</p>

<p><code>images</code> is <code>{'12','100'}</code></p>

<p>When the first image finishes loading, the first line in its <code>load</code> function will be run as </p>

<pre><code>$('#image_100').html('');
</code></pre>

<p>when it should be</p>

<pre><code>$('#image_12').html('');
</code></pre>

<p>How can I do this?</p>
