Question

我想在我的图片库中实现无限的掠夺。

默认情况下，我的图片库会显示前25张图片。我有一个'view-more'按钮，可以进行ajax调用在前25个图像下方的下25个图像中加载，依此类推，每次点击视图更多按钮。

我想要做的是通过滚动触发此视图 - 更多按钮在页面上。从按钮滚动100px将触发ajax加载事件并加载接下来的25个图像。继续向下将触发下一个25，依此类推......

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

我该如何编写此代码？

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

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

通过滚动触发'查看更多'按钮

1 个答案: