trigger 'view more' button by scrolling

问题

I want to implement infinite scolling in my image gallery.

By default, my image gallery displays the first 25 images. I have a 'view-more' button that makes an ajax call and loads in the next 25 images beneath the first 25 and so on with each click of the view-more button.

What I want to do is trigger this view-more button by scrolling down the page. Scrolling 100px from the button would trigger the ajax load event and load in the next 25 images. Continuing downwards would trigger the next 25 and so on..

Do I need an infinite loading script, like jquery.infiniteload.js or is it enough to write a script that triggers the click action when scrolling 100px towards it..

how should I write this code?

回答1:

OK. I've tried it this way... and it works.

HTML

<div id="content">
  <img src="images/1.gif" height="48" width="48" />
  <img src="images/2.gif" height="48" width="48" />
  <img src="images/3.gif" height="48" width="48" />
  <img src="images/4.gif" height="48" width="48" />
  ...
</div>

$(window).scroll(function() {
if($(window).scrollTop() )
  if (($(window).scrollTop() + 100)  >=  $(document).height() - $(window).height()){
     $.ajax({
        url: 'images.txt',
        success: function(data) {
          $("#content").append('<img src="images/' + data + '" height="48" width="48" />');
        }
    });
  }
});

It loads the pictures 100px before the bottom of the page. Also populates the data from ajax call. The call is from text file but this is irrelevant.

来源：https://stackoverflow.com/questions/12305954/trigger-view-more-button-by-scrolling

标签

jquery

ajax

infinite-scroll