使用jquery实现无限滚动 [英] Implementing Infinite Scrolling with jquery

问题描述

我正在开发一个使用 jQuery Masonry 和无限滚动插件，使用他们的API从Instagram加载n张图片。看看这个简短的示例，我的理解是我需要事先将html页面移到呈现：

I am working on a project that uses the jQuery Masonry and Infinite Scroll plugins to load "n" amount of pictures from instagram using their API. Looking at this short example my understanding is that I need to have before hand the html pages to be rendered:

<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

问题是，我真的不知道将检索多少张图片。以下是我一次检索20张图片的方法。

The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time.

    $(document).ready(function(){       
        var access_token = location.hash.split('=')[1];

        if (location.hash) {

              $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
            success: function(data) {

                for (var i = 0; i < 20; i++) {
            $("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");   
                }     

            }
        });


        } else {
        location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI"; 

        }

    });

我想我需要一个分页机制，但基于上面提到的教程，我相信我首先需要预先定义要加载的html页面。所以现在我的问题

I guess I will need a pagination mechanism but based on the tutorial mentioned above I believe I will first need to pre-define the html pages to be loaded. So now here my questions

1. 这是否意味着这个插件（无限滚动）需要在目录中包含n个html文件以实现无限滚动？


2. 是否可以实现无限滚动如果我不知道我将拥有多少页，请使用相同的插件。甚至更好，甚至不必创建物理html文件？


3. 如何实施这种分页？ （即只要用户继续向下滚动，就加载20张照片的大块）网上没有那么多文档，你能提供一小段演示或描述吗？

1. Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
2. Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
3. How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?

亲切的问候

推荐答案

1）这是否意味着这个插件（Infinite Scroll）需要有n个数量的html文件

绝对不是。您不需要事先生成静态html页面。您认为只需要一个URL方案，可以通过更改URL中的一个数字来获取后续页面内容。

Absolutely not. You do not need to generate static html pages beforehand, The only think you need is a URL scheme where subsequent page content can be fetched by changing one number in URL.

Think从无限滚动插件的角度来看它。您可以在页面＃1中加载插件JavaScript，并在页面＃1内提供指向第2页的链接。现在，当用户滚动浏览第1页时，插件所拥有的唯一变量是当前页码，例如，2或3或4（N）

Think of it from the perspective of the infinite scroll plugin. You load the plugin JavaScript in your page #1 and provide link to page#2 inside page #1. Now when the user scrolls past page#1, the only variable that the plugin has is the current page number, like, 2, or 3 or 4 (N)

插件需要创建URL以从用户滚动时获取内容。那么插件是如何做到的呢？该插件查看第1页中提供的下一个URL结构，解析它并创建一个基本路径，它将继续添加current_page_number以获取后续内容。这就是资产净值选择器的作用。

The plugin needs to create the URL to fetch content from when user is scrolling. So how does the plugin do that? The plugin looks at the next URL structure provided in page#1, parses it and creates a "base path" to which it will keep adding current_page_number to fetch subsequent content. That is the role of NAV selector.

所以假设我有像 / home / page / 2 这样的东西作为第1页的下一个网址。该插件将此解析为数组

So let's say I have something like /home/page/2 as next URL in page#1. The plugin will parse this into an array as

[/ home / page /，2]

并认为base_path = / home / page /

and think that base_path = "/home/page/"

当插件尝试获取page_number 3时，它会只需将3附加到基本路径，如base_path.join（current_page_num），使其 / home / page / 3

when the plugin attempts to fetch page_number 3, it will just append 3 to the base path, like base_path.join(current_page_num) making it /home/page/3

在服务器端，我可以只需要一个控制器来处理所有/ home / page / 1到/ home / page / N链接。您可以查看插件内部，查找_determinePath并检索函数。

On server side I can just have a controller that takes care of all the /home/page/1 to /home/page/N links. You can just look inside the plugin, look for _determinePath and retrieve functions.

现在您也可以看到问题。问题是，根据您在代码中进行分页的方式以及您需要多少变量，可能存在各种各样的URL结构。我的分页方式与你的分页方式不同。同样适用于框架。 Drupal分页方案可能与Djanga和wordpress等不同。

Now you can see the problem as well. The problem is that there can be an infinite variety of URL structure depending on how you are doing pagination inside your code and how many variables do you need. My way of doing pagination is different from your way of doing pagination. Same holds for frameworks. Drupal pagination scheme may be different from Djanga and wordpress etc.

该插件无法应对所有这些URL结构。给定下一个URL，不可能总是推断出需要添加current_page_number的基本路径。再看一下插件的_determinePath（）方法，看看它能处理什么样的URL。它可以解析简单的URL结构，如page2.html或page = 2，但如果您的URL结构很复杂或者插件无法处理，您必须提供自己的实现。看看pathParse（）方法。

The plugin cannot possibly cope with all these URL structures. Given a next URL, it cannot possible always deduce the "base path" to which it needs to add current_page_number. Again look at _determinePath() method of plugin to see what kind of URL it can cope with. It can parse simple URL structures, like page2.html or page=2 but you have to provide your own implementation if your URL structure is complicated or something that the plugin cannot handle. Look at pathParse() method as well.

2）如果我不知道有多少页面，是否可以使用相同的插件实现无限滚动。

同样，无需创建HTML文件。您有两种选择来表示内容结束（不知道您提前有多少张图片）

Again, there is no need to create HTML files. You have two options to signal end of content (without knowing how many pictures you have in advance)

• 当您达到无内容时条件你可以返回HTTP 404.


• 或者你可以返回一个空字符串。

这是否回答了这个问题？

Does this answer the question?

如何使用插件

• 第一页 - 包括 - NAV选择器 - 以实际方式加载THNIG


• 首页加载 - 使用instagram分页并在你的javascript中存储nextURL


• 在Scroll上 - 覆盖_determinePath以使用（2）提供您自己的提取URL - 让插件检索该URL


• 覆盖插件内容选择器 - 因此它返回新元素以进行回调


• 关于插件获取内容 - 使用插件内部的回调更新页面

• First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY
• First page on load - use instagram pagination and store "nextURL" in your javascript somewhere
• On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL
• Override plugin content selector - so it returns new elements to callback
• On Plugin fetch content - Use the callback inside plugin to update your page

我已经分叉paul的github仓库来添加文档用于PHP服务器端集成。我相信插件假设下一个URL仅依赖于当前页码太严格了。我们需要从下一页内容中获取nextURL。

I have forked paul's github repo to add documentation for PHP server side integration. I believe that plugin's assumption that next URL is only dependent on current page number is too restrictive. We need to get nextURL from next page content.

Github Repo - https://github.com/rjha/infinite-scroll

Github Repo - https://github.com/rjha/infinite-scroll

基本仓库的拉取请求 - https://github.com/paulirish/infinite-scroll/pull/219

Pull request on base repo - https://github.com/paulirish/infinite-scroll/pull/219

我的javascript知识非常有限，也许你可以更好地扩展基本插件。然而，每一滴都有助于造海洋：）

My javascript knowledge is very limited and maybe you can do a better job of extending the base plugin. However every drop helps make the ocean :)

这篇关于使用jquery实现无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！