使用jquery实现无限滚动

Question

使用jquery实现无限滚动

Bar*_*lla 9 javascript jquery jquery-masonry infinite-scroll

我正在开发一个使用jQuery Masonry和Infinite Scroll插件的项目,使用他们的API从instagram加载"n"张图片.看看这个简短的例子,我的理解是我需要事先呈现要呈现的html页面:

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

Run Code Online (Sandbox Code Playgroud)

问题是,我真的不知道将检索多少张图片.以下是我一次检索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"; 

        }

    });

Run Code Online (Sandbox Code Playgroud)

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

这是否意味着这个插件(Infinite Scroll)需要在目录中包含"n"个html文件才能实现无限滚动？
如果我不知道我将拥有多少页,是否可以使用相同的插件实现无限滚动.甚至更好,甚至不必创建物理html文件？
如何实现这种分页？(即只要用户继续向下滚动,就会加载20张照片的大块)在网上没有那么多文档,你能通过演示或描述提供一小步吗？

亲切的问候

Answer 1

rjh*_*a94 11

1)这是否意味着此插件(无限滚动)需要具有"n"个量的html文件

绝对不.您不需要事先生成静态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.
或者你可以返回一个空字符串.

这回答了这个问题吗？

如何使用插件

第一页 - 包括 - NAV选择器 - 以实际方式加载THNIGS
首页加载 - 使用instagram分页并在你的javascript中存储"nextURL"
在Scroll上 - 使用(2)覆盖_determinePath以提供您自己的提取URL - 让插件检索该URL
覆盖插件内容选择器 - 因此它将新元素返回给回调
关于插件获取内容 - 使用插件内部的回调来更新页面

更新github repo

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

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

在基础仓库上提取请求 - https://github.com/paulirish/infinite-scroll/pull/219

我的javascript知识非常有限,也许你可以更好地扩展基本插件.然而,每一滴都有助于海洋:)

Answer 2

Ber*_*rgi 5

这是否意味着这个插件(Infinite Scroll)需要在目录中包含"n"个html文件才能实现无限滚动？

是的,该特定插件似乎旨在仅支持静态页面,否则将使用"下一页"链接.你发现的教程甚至声称它无法使用URL参数处理动态生成的内容,尽管我并不相信.

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

通过该插件的设计,我会说没有.当然,您应该能够使用(未知)数量的动态生成的页面与图片.这需要从instagram api提供服务器端代码,这似乎不是你想要的.

如何实现这种分页？(即只要用户继续向下滚动,就会加载20张照片的大块)在网上没有那么多文档,你能通过演示或描述提供一小步吗？

还有其他无限滚动插件.您找到的网站上的演示2和5 实现了一个简单的"本机"(即无插件)无限滚动,两者都通过ajax加载新内容.演示3和4使用无限滚动插件和更多滚动选项,虽然演示不包括ajax.

现在,您可以自由决定你想如何实现你的脚本.您似乎想要首先从instagram获取所有图像URL,但只是chunkwise附加(因此加载图像文件).如果instagram支持分页API,您可能希望将两个加载过程组合在一起.

这可以通过演示2到5中的代码完成 - 当滚动到达页面结束时,触发加载图像的请求.在那之后,在新的img元素(或者instaframe divs,就像你的例子中)上调用Masonry的appended方法.

归档时间：	13 年，4 月前
查看次数：	9098 次
最近记录：	9 年，3 月前