How can I get this effect with jquery?

How can I get this effect with jquery?

Hi, here is what I want to do. I created a div and inside this div I  inject images inside this div from a jquery ajax .post method.

What I want to do is have  the user scroll threw the images. Yet lets say there is 50 images.

I don't want to load in all 50 at once. I want to have the user to scroll down. once the image leaves the viewing point of the div I want it to be deleted not being able to view it unless the user scrolls back to it.

In other words I want  the images to be loaded into this dive only when it needs too.

for example if I am scrolling threw the images lets say I am on image 10 and there is a total of 50 images.

When I scroll to image 14 or 15 I want to unload all the images from 10 to 1 or in progarmming terms 0.
yet while it unloads those images I want it  to after that to load in 16,17,18,19.

Also keep in mind image 14 and 15 was already loaded but was at the botton or the scrolling of the div.


So I want to  have a scrollable div that the user can scroll threw all 50  image but not have all 50 loaded at once but have the user scroll for a while to unload some images and load in more files.

how can i with jquery detect the percentage of the scroll bar. Like  if the user scrolls downwards how would I know how var he scrolled so I can run a ajax post code that will inject or load in new images and unload the images already scrolled threw.

So to sum it up I want to make a div scrollable  that the user can scroll threw about 50 images.
yet I don't want all 50 loaded at the same time. I want images to be loaded as needed and unload them when not needed and reload them back if it's needed again.
That way it dosen't take a load on the persons computer.