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.