image loading in jquery

I have a function in which in first draw the div's and call image load function

In image load function i call a another function Loadimage

In Loadimage i append the image to the div's which i have drawn in first function

thumb[] has a image html tag

I have button when clicked on it a popupwindow opens,and the popupwindow has div called image in which the images are appended

<div id="image"></div>

for (var i in this.thumb) {          
            var img = this.thumb[i];
            var imgdiv = $('<div>');


            imgdiv.attr('id', 'img' + i + '');

            (#image).append(imgdiv);
            $(img).load({ navig_cell: img, index: i }, jQuery.proxy(this, 'Loadimage'));

}

Loadimage: function(params) {
        var img = params.data.navig_cell;
     开发者_JAVA百科   var index = params.data.index;

        $('#img' + index + '').append(img);
}

Once i close the popupwindow in which i append the image and for the next time when i quickly open the popupwindow the images are appending from the place were the loading of the image stop and also the same images are append for second time from the place the loading of the images stopped(2 time the images are appending)

The problem is this line:

$('#img' + index + '').append(img);

This adds more images to the ones which already exist. You probably want:

$('#img' + index + '').html(img);

which replaces the current content with the new img.