Question

我正在尝试实现“无限滚动”行为来加载页面上的一些照片，而我正在使用以下javascript来执行此操作

    $(document).ready(function(){
      $(window).scroll(function(){
          var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
          var  scrolltrigger = 0.10;
          if  ((wintop/(docheight-winheight)) > scrolltrigger) {
             console.log('scroll bottom');
             lastAddedLiveFunc();
          }
      });
    });

默认情况下，我想用足够的照片填充用户页面以放入滚动条 - 否则上面的javascript永远不会激活（如果只加载3张图片说）。这些照片在

末尾加载了ajax调用

lastAddedLiveFunc()

知道如何实现这个目标吗？

Answer 1

他是我所做的，我认为你正在寻找的东西：http://jsfiddle.net/pseudosavant/FENQ5/

基本上，只要窗口底部的位置在文档底部的X像素内，我就会添加一些内容。

使用Javascript：

$(document).ready(function(){
    $(window).scroll(function(){
        var docBottom = $(document).height();
        var winBottom = $(window).height() + $(window).scrollTop();
        var scrollTrigger = $(window).height() * 0.25;

        if ((docBottom - scrollTrigger) < winBottom) {
            $("#container").append("<div class='box red'></div>");
            console.log("added more");
        }
    });
});

如何加载足够的图像以在用户页面上放置滚动条以启用无限滚动行为？

1 个答案:

使用Javascript：