Question

我正在为我的tumblr页面编写一个小的 jQuery 脚本，它通过jQuery.get()模拟无限滚动加载我想要的内容来自网站的下一页（它是一个 tumblr 网站，所以分页是好的。）我知道有一些无限的滚动插件，但我尝试不为我工作，而且，非常脂肪。我不需要那些功能。该脚本加载我想要的新元素，是的，但问题是每次都从两个页面加载内容。显然，它应该只加载一个页面内容。

jQuery 是：

    $(document).ready(function() {
      "use strict";
      var nextPage = 2;
      var totalPages = {TotalPages};
      var url = '/page/'; // base url
      $(document).on('scroll', function() {
        if (nextPage <= totalPages) { // if exist new pages
          if ($(window).scrollTop()== $(document).height() - $(window).height()) { // when reach the page bottom
            $.get(url + nextPage, function(data){ // get the next page
              $(data).find(".post").appendTo(".posts"); // filter content we want and append it to the actual page element
              picturefill(); // reload picturefill,making the new images responsive
            });
            nextPage++; // increment nextpage counter
          };
        } else { // exit if no more pages
          return;
        }
      });
    });

它加载的内容是：

<div class="posts">
<article class="photo-container post" id="{PostID}" data-reblog="{ReblogURL}">
    <div class=" picturefill" data-picture data-alt="" data-class="photo">
        <div class="picturefill" data-src="{PhotoURL-HighRes}" ></div>
        <div class="picturefill" data-src="{PhotoURL-500}" data-media="(max-width: 568px)"></div>
        <div class="picturefill" data-src="{PhotoURL-250}" data-media="(max-width: 250px)"></div>
        <img alt="" class="photo" src="http://img.jpg"> <!-- generated by picturefill -->
        <noscript><img class="photo" src="{PhotoURL-HighRes}" alt=""></noscript>
    </div>
    <!-- MORE CODE -->
</article>

我使用Picturefill作为响应式图片，效果很好。有人有想法吗？感谢。

Answer 1

（在问题编辑中回答。转换为社区维基回答。请参阅What is the appropriate action when the answer to a question is added to the question itself?）

OP写道：

我使用控制变量lastLoadingPos解决了我的问题，该变量存储脚本插入页面内容的最后位置（相对于文档）。如果该位置没有变化，则不会进行任何插入。这是因为多个内容插入的发生是因为脚本检测到页面的底部已经在同一位置多次到达。   是的，这解决了这个问题，但我认为它并不优雅而不是正确的解决方案。只是一个解决方法。如果有人知道它会很受欢迎：D

我的解决方法（当然，我还需要添加一两件事）：
$(document).ready(function() {
  "use strict";
  var nextPage = 2;
  var lastLoadingPos = 0; // stores last insertion position (document related)
  var totalPages = {TotalPages};
  var url = '/page/'; // base url
  $(document).on('scroll', function() {
    if (nextPage <= totalPages) { // if exist new pages
      var top = $(window).scrollTop();
      if ((lastLoadingPos != top) && (top== $(document).height() - $(window).height())) { // when current bottom position reached first time
        lastLoadingPos = top; // new last insertion position
        $.get(url + nextPage, function(data){ // get the next page
          $(data).find(".post").appendTo(".posts");  // filter wanted content
          picturefill(); // reload picturefill, making new images responsive
          nextPage++; // increment nextpage counter
        });
      }
    } else { // exit if no more pages
      return;
    }
  });
});  

使用jQuery Infinite滚动脚本加载两个页面内容（当只需要一个加载时）

1 个答案: