如何加载足够的图像以在用户页面上放置滚动条以启用无限滚动行为？ [英] How can I load enough images to put a scroll bar on a users page to enable infinite scroll behaviour?

问题描述

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

I am trying to implement an "infinite-scroll" behaviour to load some photos on a page and I'm using the following javascript to do so

    $(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调用

By default I would like to fill up the users page with just enough photos to throw in a scroll bar - otherwise the above javascript would never fire (if only 3 images are loaded say). The photos are loaded with an ajax call at the end of

lastAddedLiveFunc()

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

Any idea how I could achieve this?

推荐答案

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

He is a jsFiddle I made that does what I think you are looking for: http://jsfiddle.net/pseudosavant/FENQ5/

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

Basically any time the position of the bottom of the window gets within X pixels of the bottom of the document I add some content.

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

这篇关于如何加载足够的图像以在用户页面上放置滚动条以启用无限滚动行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！