Is it possible to set up a mask in the browser?

[RIRedinPA]

I'm trying to figure out a way to do this:

 

say I have a fixed position element (div) that's 300x 300 pixel, 100px off the left margin of the window, 100px off the top. Beneath that I have another div whose height will be random based on the number of images loaded into it. Is there a way to only have the images that fall into the 300x300 area of the fixed div load, while loading some default image for the other images and then, as the user scrolls and new images fall within the 300x300 area they subsequently load. Similar to using a mask in Photoshop or Flash, think of Google's new image search results page as an example.

 

Hard coding or framework doesn't make a difference how the result is achieved.

 

(I don't think there is a need to have a 300x300 fixed position element, you can just declare those points in the JS, I was using that to help clarify the example.)

[sohaibshaheen]

You can implement that using

 

Jquery...

 

Although that will be difficult job but .scroll() and .scrollTop() are fucntions that you need!

 

Hope that helps