通过滚动触发“查看更多"按钮 [英] trigger 'view more' button by scrolling

问题描述

我想在图片库中实现无限评分.

I want to implement infinite scolling in my image gallery.

默认情况下，我的图片库显示前25张图片. 我有一个查看更多"按钮，可以进行ajax调用， 每次单击查看更多"按钮，将在前25张图片下面加载接下来的25张图片.

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.

我想做的是通过滚动触发此查看更多"按钮 向下翻页. 从按钮滚动100px将触发ajax加载事件并在接下来的25张图像中加载. 继续向下将触发下一个25，依此类推.

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..

我是否需要一个无限加载脚本，例如jquery.infiniteload.js 还是编写触发点击动作的脚本就足够了 向其滚动100像素时..

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?

推荐答案

确定.我已经尝试过这种方式了...而且行得通.

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>

JS

$(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" />');
        }
    });
  }
});

它将在页面底部之前100px加载图片.还填充来自ajax调用的数据.调用来自文本文件，但这无关紧要.

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.

这篇关于通过滚动触发“查看更多"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！