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

Question

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!

score 1 · Answer 1 · answered Jul 30 '10 at 22:05

1

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

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

answered Jul 30 '10 at 22:05

Ivan

1,511
16
22

Gabriele Petrioli · Accepted Answer · 2010-07-31T00:27:42.517

Here is some code that runs on .scroll() and calculates how far from the bottom the current scroll is ..

http://jsfiddle.net/hRSE8/ (in this example, i add manually some text to showcase the effect of adding content and the scroll system adjusting to it)

At a specified distance you can load content with .ajax()

in short

$(window).scroll(function(){
    var $this = $(this);
    var $body = $('body');
    var distance = $body.outerHeight() - $this.height() - $this.scrollTop() );
});

Update

Here is an updated example that will show when an element is in view (additional update to match specs in comment)

Demo

<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){

        var $window = $(window);

        var visibleTop = $window.scrollTop();
        var visibleBottom = visibleTop + $window.height();

        var elementTop = $('#myloader').offset().top;
        if ( elementTop > visibleTop && elementTop < visibleBottom)
            {
               // loader in view
               // so we remove the loader from the DOM
               $('#myloader').remove();

               // and run the code ..
               $('#tweetsFeed').jTweetsAnywhere(
                             { searchParams: ['ors=patanemo+bocaina+cuyagua+todasana+parguito+%23surfVE&lang=es&geocode=8,-66,1000km'],
                               count: 6 });
            }

    });
  });
</script>

And you need to put in your page the loader with <img src="loader.gif" id="myloader" />

Hi! Thanks, im sorry but im very new at javascript and i will need a little more help, im sorry for asking you again, the thin is that when the user "see" a image (that will be a loader.gif) i need to run this script: And of course the image loader must disappear. Can you help me here? And Thanks Again! — DomingoSL, Jul 30 '10 at 22:51

score 0 · Answer 3 · edited May 23 '17 at 12:07

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: Check if element is visible after scrolling

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.

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

3 Answers3