无限滚动Jquery [关闭]答案

【问题标题】：Infinite Scrolling Jquery [closed]无限滚动Jquery [关闭]
【发布时间】：2013-01-12 22:22:19
【问题描述】：

我找到了这些demos 用于使用 Jquery 进行无限滚动，但我不知道如何使用它们，因为没有提供它们的来源。如果有人喜欢他们，请您解决这个问题吗？

我为 Demo 5 尝试了这段代码，但没有成功。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
    function lastAddedLiveFunc()
    {
        $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

        $.get("loadmore.php", function(data){
            if (data != "") {
                //console.log('add data..');
                $(".items").append(data);
            }
            $('div#lastPostsLoader').empty();
        });
    };

    //lastAddedLiveFunc();
    $(window).scroll(function(){

        var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
        var  scrolltrigger = 0.95;

        if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         //console.log('scroll bottom');
         lastAddedLiveFunc();
        }
    });
});
</script>
</head>
<body>
<ul class="items">
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>

   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>
   <li>content</li>                   
  </ul>

<div id="lastPostsLoader"></div>
</body>
</html>

【问题讨论】：

我看到了样本，它们都包括<script src='...'></script>。您应该能够找出要包含的文件以及如何使用它。
我试过了，但缺少一些东西
我看到你只包含了jquery-1.9.0.min.js。您正在使用的插件的 js 也应该包含在内，例如，jquery.masonry.min.js 用于演示 1。
但是第一个插件需要这些，这是第 5 个。
这是好多更好的脚本☞github.com/yairEO/infinite

标签： javascript jquery lazy-loading infinite-scroll ondemand

【解决方案1】：

试试这个：

function lastAddedLiveFunc(){
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

    $.get("loadmore.php", function(data){
        if (data != "") {
            //console.log('add data..');
            $(".items").append(data);
        }
        $('div#lastPostsLoader').empty();
    });
}

$(document).ready(function(){
   $(window).scroll(function(){

      var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
      var  scrolltrigger = 0.95;

      if  ((wintop/(docheight-winheight)) > scrolltrigger) {
       //console.log('scroll bottom');
       lastAddedLiveFunc();
      }
  });
});

【讨论】：

不幸的是它没有用
你试过scrollHeight吗？控制台中是否有任何错误。
那么你必须在webserver 上测试它，比如wamp 或xamp，因为$.get() 是一种速记的ajax 方法。
你可以使用json结构。
绝对用json试试。