Loading content on a webpage only when a part of the webpage is displayed on the browser

Question

Hello, in some pages i see when you arrive at the end of the page the page automatic loads new data. For example, some blogs when you get to the end of the page (that only loads 10 articles when you get there), the page load 10 articles more without pressing anything, so the questions will be, How do i execute/triger a php/javascript commands when something is displaying or the user gets to a particular position of the page? (USING A LOADER IMAGE OF COURSE)

--edit-- IMPORTANT: Please i dont need a triger by scroll, i need to triger from a display object, like when some image is in focus. Thanks!

Answer 1

I have never had to do this before but how I would do it is like this:

I would calculate the scroll position of the page using:

$(window).scrollTop();

Then I would find the scroll position an element on the page:

$(element selector).scrollTop()

Once the first number is bigger than the second number (plus maybe a buffer) then go ahead and make your ajax call to load whatever content you want.

This is all theoretical as I have never done but it seems logical. Anyone feel free to correct me where I might be wrong.

EDIT: You could also use the answer from this post: http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling

to see if an element is visible on the screen and then load at that time.

Though either of these solutions would require you to add an event handler for the scroll event.

Answer 2

If you're using the jQuery framework, have a look at infinite scroll:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/