如何在每次迭代中显示图像（ajax）

please help to resolve the following issues:
There is a page which loads the image.
50 pictures.
How to make, that images would be displayed gradually (example google photo)?

$(document).ready(function(){
        $.ajax({
            type: 'POST',
            url: document.location.href,
            dataType: 'html',
            data: {'ajax-query': 'true'}
            success: function(data){
                $('#divgallery').append(data);
            }
        });
    })

Here comes the server code

    if($i=0; $i<50;$i++){   echo '<img src="/img/' . $img . '">';   }

They are displayed all at once, after the server-side code is done.
How display images on each iteration?
Any tips, link or code example would be useful.

Firstly, on the server site return the image links in such way that they can be retrieved individually. I recommend JSON fromat.

$res = array();
if($i=0; $i<50;$i++){  $res[] = '<img src="/img/' . $img . '">';   }
echo json_encode($res);

Secondly, after you get the data you have to add the images one by one, but with a delay between the additions.

       success: function(data){
            delayAppend($("#divgallery"), data, 0);
        }

And the delayAppend function would be something like:

function delayAppend($div, data, index){
   if(index >= data.length)
      return;

   $div.append(data[index]);
   setTimeout(function(){ delayAppend($div, data, index+1); }, 500);
}

Here is a demo of the delayAppend function: http://jsfiddle.net/s7Q8W/

Note: Code not fully tested.