0

我想在我的图片库中实现无限缩放。

默认情况下，我的图片库会显示前 25 张图片。我有一个“查看更多”按钮，可以进行 ajax 调用，并在前 25 个图像下方的下一个 25 个图像中加载，以此类推，每次单击查看更多按钮。

我想要做的是通过向下滚动页面来触发这个查看更多按钮。从按钮滚动 100 像素会触发 ajax 加载事件并加载接下来的 25 个图像。继续向下将触发下一个 25 等等..

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

我应该如何编写这段代码？

4

1 回答 1

1

好的。我已经尝试过这种方式......并且它有效。

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

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.

于 2012-09-06T18:28:54.070 回答