9

我正在开发一个项目，该项目使用jQuery Masonry和Infinite Scroll插件使用他们的 API 从 instagram 加载“n”张图片。看看这个简短的例子，我的理解是我需要事先准备好要呈现的 html 页面：

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

问题是，我真的不知道会检索到多少张图片。例如，这是我一次检索 20 张照片的方法。

    $(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 页面。所以现在我的问题在这里

  1. 这是否意味着这个插件（Infinite Scroll）需要在一个目录中有“n”个 html 文件才能实现无限滚动？
  2. 如果我不知道我将拥有多少页，是否可以使用相同的插件实现无限滚动。甚至不必创建物理 html 文件就更好了？
  3. 这种分页怎么实现呢？（即，只要用户继续向下滚动，就可以加载 20 张图片块）在线文档不多，您能否通过演示或描述提供一个简短的步骤？

亲切的问候

4

2 回答 2

12

1）这是否意味着这个插件（无限滚动）需要有“n”个html文件

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

从无限滚动插件的角度来考虑。您在页面 #1 中加载插件 JavaScript，并在页面 #1 内提供指向页面 #2 的链接。现在，当用户滚动过去第 1 页时，插件的唯一变量是当前页码，例如 2、3 或 4 (N)

插件需要创建 URL 以在用户滚动时获取内容。那么插件是如何做到的呢？该插件查看 page#1 中提供的下一个 URL 结构，对其进行解析并创建一个“基本路径”，它将不断添加 current_page_number 以获取后续内容。这就是 NAV 选择器的作用。

因此，假设我在 page#1 中有类似/home/page/2作为下一个 URL 的内容。该插件会将其解析为一个数组

[/home/page/,2]

并认为 base_path = "/home/page/"

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

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

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

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

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

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

  • 当您达到“无内容条件”时，您可以返回 HTTP 404。
  • 或者您可以返回一个空字符串。

这能回答问题吗？

它如何与插件一起使用

  • 第一页 - 包括 - 导航选择器 - 以通常的方式加载 THNIGS
  • 加载的第一页 - 使用 instagram 分页并将“nextURL”存储在您的 javascript 中的某处
  • On Scroll - 使用 (2) 覆盖 _determinePath 以提供您自己的获取 URL - 让插件检索该 URL
  • 覆盖插件内容选择器 - 因此它将新元素返回给回调
  • On Plugin fetch content - 使用插件内部的回调来更新你的页面

更新 github repo

我已经分叉了 paul 的 github repo 以添加 PHP 服务器端集成的文档。我认为插件假设下一个 URL 仅依赖于当前页码的限制过于严格。我们需要从下一页内容中获取 nextURL。

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

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

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 :)

于 2012-07-21T19:36:14.483 回答
5

这是否意味着这个插件（无限滚动）需要在一个目录中有“n”个html文件才能实现无限滚动？

是的，该特定插件似乎仅支持静态页面，否则将使用“下一页”链接。您找到的教程甚至指出它无法使用 URL 参数处理动态生成的内容，尽管我并不真的相信。

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

根据该插件的设计，我会说No。当然，您应该能够使用（未知）数量的带有图片的动态生成的页面。这需要从 instagram api 提供服务器端代码，这似乎不是您想要的。

这种分页怎么实现呢？（即，只要用户继续向下滚动，就可以加载 20 张图片块）在线文档不多，您能否通过演示或描述提供一个简短的步骤？

还有其他无限滚动插件。您在该站点上找到的演示 2 和 5实现了一个简单的“本机”（即无插件）无限滚动，两者都通过 ajax 加载新内容。演示 3 和 4 使用了带有更多滚动选项的无限滚动插件，尽管演示不包含 ajax。

现在您可以自由决定您希望如何实现您的脚本。您似乎首先想从 instagram 获取所有图像 url，但仅逐块附加（并因此加载图像文件）。如果 instagram 支持分页 api，您可能希望将两个加载过程结合起来。

这可以使用演示 2 到 5 中的代码来完成 - 当滚动到达页面末尾时，触发加载图像的请求。之后，在新的 img 元素（或 instaframe div，如您的示例中）上调用Masonry 的appended方法。

于 2012-07-17T20:18:13.187 回答