使用Ajax延迟加载

I created a database where I store all the images' names so that I can retrieve it later on. To retrieve the images' names, I use ajax and bind it with <img> tag:

$.post('image_name.php',{id:id}, function(data){
   $('#container').html('<img src="img/'+data+'">');
});

Everything works great. But what I noticed was, all the images shows up at the same time which slows the process a little bit. Therefore, I am thinking that the best way to handle this issue is to use lazy load. I want any data that is ready to be displayed.... but I do not know how to.

Additonal Info: I am trying to create a list of thumbnails. Just like the Imgur sidebar (http://imgur.com/gallery/19E2ZAX)

If you plan to create a list with left / right button:

1. With ajax fetch array of next 6 images. Only names or ids.
2. On ajax success:
   • create a loop for array of images $(array).each in jquery is nice!
   • in loop cycle set one time timer (http://archive.plugins.jquery.com/project/timers is great) for each image. Use index of array * Interval * 1000 (1000ms for 1 sec)

Whole idea is:

onsuccess:
    $(whatyougotfromajax).each(function(index, value)
    {
        $.oneTime(index * Interval * 1000, function()
        {
            $('#block').append('<img src="sth.php?Id=' + value + '">');
        });
    });

I im not sure... Not, I'm sure it is not work in this way, but you've got the idea