<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页面.所以现在这里我的问题
>这是否意味着此插件(Infinite Scroll)需要在目录中具有“n”个HTML文件以实现无限滚动？
>如果我不知道我将拥有多少页面,可以使用相同的插件来实现无限滚动.甚至不需要创建物理HTML文件呢？
>如何实现这种分页？ (即,只要用户不断向下滚动即可加载20张图片)在线没有太多的文档,您可以通过演示或描述提供一小步吗？
亲切的问候
解决方法
绝对不.您不需要事先生成静态HTML页面,唯一认为您需要的是一种URL方案,其中可以通过更改URL中的一个数字来获取后续页面内容.
从无限滚动插件的角度来考虑它.您将页面#1中的插件JavaScript加载到页面#1中,并提供到页面#2的链接.现在当用户滚动页面#1时,插件所具有的唯一变量是当前页面编号,如2或3或4(N)
插件需要创建从用户滚动时获取内容的URL.那么插件怎么做呢？该插件查看页面#1中提供的下一个URL结构,进行解析并创建一个“基本路径”,将继续添加current_page_number来获取后续内容.那就是NAV选择器的作用.
所以让我们说一些像/ home / page / 2这样的页面#1中的下一个URL.插件将解析为数组
[/家/页/ 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.
>或者你可以返回一个空字符串.
这是否回答了问题？
如何使用插件
>第一页 – 包含 – 资产净值选择器 – 负载说明了这种方式
>第一页的加载 – 使用instagram分页和存储“nextURL”在你的JavaScript某处
>滚动 – 覆盖_determinePath以提供您自己的抓取URL(2) – 让插件检索该URL
>覆盖插件内容选择器 – 所以它返回新的元素回调
>插件抓取内容 – 使用插件内的回调更新您的页面
更新github回购
我已经为paul的github repo分配了PHP服务器端集成的文档.我认为插件的假设下一个URL只是依赖于当前的页码太限制了.我们需要从下一页内容获取nextURL.
Github Repo – https://github.com/rjha/infinite-scroll
在基础报销 – https://github.com/paulirish/infinite-scroll/pull/219上提出请求
我的javascript知识非常有限,也许你可以做更好的扩展基础插件.不过每一滴都有助于海洋