How can I load enough images to put a scroll bar on a users page to enable infinite scroll behaviour?

问题

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

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?

回答1:

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

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.

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

来源：https://stackoverflow.com/questions/9283210/how-can-i-load-enough-images-to-put-a-scroll-bar-on-a-users-page-to-enable-infin