无限滚动，通过ajax加载数据
无限滚动是一种网页设计技术，通过使用Ajax（Asynchronous JavaScript and XML）加载数据，实现在用户滚动页面时自动加载新内容的效果。相比传统的分页加载方式，无限滚动可以提供更流畅的用户体验，避免了翻页的操作。
无限滚动的工作原理是当用户滚动到页面底部时，通过Ajax请求加载新的数据，并将其动态添加到页面中。这样用户可以无需刷新页面或点击翻页按钮，就能够连续地浏览内容。
无限滚动在许多网站和应用中都有广泛的应用场景，特别是在社交媒体、新闻资讯、图片浏览等需要展示大量内容的场景中。它可以提高用户的浏览效率，减少页面加载时间，同时也能够增加用户的黏性和留存率。
腾讯云提供了一系列与无限滚动相关的产品和服务，包括：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云存储服务，可用于存储无限滚动加载的数据。详情请参考：腾讯云对象存储
- 腾讯云CDN（内容分发网络）：通过全球分布的加速节点，加速无限滚动加载的数据传输，提供更快的访问速度和更好的用户体验。详情请参考：腾讯云CDN
- 腾讯云云服务器（CVM）：提供可靠的云服务器实例，用于部署和运行支持无限滚动的后端应用程序。详情请参考：腾讯云云服务器
- 腾讯云数据库（TencentDB）：提供高性能、可扩展的数据库服务，用于存储和管理无限滚动加载的数据。详情请参考：腾讯云数据库
通过使用腾讯云的相关产品和服务，开发人员可以更轻松地实现无限滚动功能，并提供稳定、高效的用户体验。
相关·内容
1回答
我使用手柄加载了上千条记录。当我加载页面时，需要很长时间才能加载。因此，我的问题是:是否有任何缓冲区功能来缓冲一些数据，然后滚动另一些数据呢？我试图加载"100“数据，而第一次刷新。然后在滚动时，它将获取另一个"100“记录。但这行不通。请帮帮我。
谢谢
浏览 1提问于2016-04-18得票数 0
回答已采纳
3回答
按需滚动加载数据
、、
我正在通过滚动实现按需加载数据。
我已经在document.ready中为div注册了该函数。
只有当滚动条到达最后一个滚动条时，才应填充数据。因此，为了确定滚动是否已经到了最后，我使用了下面的函数。
$("#tree").scroll(function () {
if (isScrolledToBottom(this)) {
}
});
但是函数没有返回正确的值。我的意思是，当scroll到达它的最后一个时，它应该返回一个真值。
function
浏览 2提问于2012-03-12得票数 0
回答已采纳
2回答
我正在使用CodeIgniter。在我的控制器中，我解码一个JSON响应，并在加载视图时简单地显示这些值。我只是简单地显示JSON数组中的所有内容(，没有数据库使用)。它完全是一个数组，我从数组中呈现数据，我想在滚动时自动显示内容。
示例：
$resultjson = $this->curl->simple_get("http://www.test.com/api/records.php?ak=XXXXXXXX&ts=XXXXXXXX&sig=XXXXXXXX&postano=XXXXXX&count=100");
当自动加载时，我
浏览 3提问于2012-12-10得票数 2
回答已采纳
我希望将一个大型数据集从服务器加载到jQuery DataTables中(数千行，大约20到30列)。
我不想一次性加载整个数据，而是逐块加载表块。执行一个ajax调用，取回几百行，并在用户向下滚动时重复执行。比如facebook和twitter上的feeds。向下滚动，更多的ajax调用被触发，更多的数据到达浏览器DOM并被呈现。
我正在探索各种选择。一个是我认为在使用iDeferLoading的同时也在使用fnAddData() API。以前有没有人这样做过，或者有什么我可以参考的其他建议？
浏览 1提问于2011-10-26得票数 1
2回答
我目前有一个连续的滚动分页，由于Http是无状态的，并且没有办法从HttpRequest中恢复之前的数据集，将页面变量存储到用户会话中是一个好的做法吗？(比如添加上一次加载的内容的id，这样在下一次加载或下一次请求时，它将加载下一个元素)(假设页面是通过AJAX加载的)我这样实现了它。
例如，如果用户搜索某个名称，它将转到执行此操作的某个操作。
paginationHelperBean = new PaginationHelper();
if(page == 0 && name != null){
paginationHelperBea
浏览 3提问于2013-03-09得票数 0
回答已采纳
1回答
我的团队正在考虑实现一个无限滚动页面，同时保持良好的SEO。我们遵循谷歌关于无限滚动搜索引擎优化的建议，这篇文章是：http://googlewebmastercentral.blogspot.co.uk/2014/02/infinite-scroll-search-friendly.html
这个例子是：
http://scrollsample.appspot.com/items?page=4
似乎完全有可能使无休止的分页，SEO友好，只要您的每个页面是分开寻址使用rel="next"/"prev"和HTML5历史API是用来警告DOM时，一个新的页面被加载
浏览 0提问于2015-12-03得票数 2
回答已采纳
2回答
我目前正在开发一个web应用程序，以突出django中的界面以及内容加载的方式。
在我的数据库中，可能有数千个这样的条目，我想确保每次只需要加载一个给定的数字，以减少服务器等方面的压力。
假设我有5000条记录，最初加载了给定数量的对象。然后，当i到达屏幕底部的记录时，加载下一组记录。
views.html：
def list(request):
list_data = Container.objects.all()
return render(request,
'list.html',
{
浏览 4提问于2016-03-19得票数 1
我目前正在开发一个ASP.net C#项目。我想要能够显示来自数据库的数据的设置限制，而不是使用网格视图，我想自己处理布局与代码，在页面上。当用户滚动到窗口底部时，它会加载更多的记录，就像Twitter提要页面所做的那样。
我不知道这叫什么才能搜索到它。
浏览 0提问于2011-07-15得票数 0
1回答
假设您有一个页面，它是一个视图，视图设置为50项页面。你有150件物品，所以你有三页。当用户滚动到底部时，是否有一个模块会加载额外的结果，比如30多个？
其效果是，您不需要使用寻呼机，因为新的结果会自动出现。
我想得到的效果是在本站中使用的效果。
是否有一个模块可以对视图执行此操作？
浏览 0提问于2011-04-25得票数 4
回答已采纳
我使用这个插件在我的网站上无限滚动用户的帖子。几天前我第一次安装它时，它运行得很顺利，但我刚刚意识到，它只需点击一下鼠标的滚轮就能加载下一页，甚至我甚至可以将滚动条向下调整，哪怕是最小的一部分。我将我的分页设置为每页1个帖子，IAS立即加载第二个帖子，并继续为我滚动的每个片段加载新帖子。问题是，在我到达页面底部之前，它会加载数千篇帖子。我试着从页面中删除所有其他javascript，我试着删除post的不同组件，只是想看看是否有什么干扰了IAS插件，但似乎没有什么能解决这个bug。在我第一次安装它的时候，它没有这样做，从那以后我也没有直接改变任何与它相关的东西-所以会不会有什么东西干扰了它？
浏览 0提问于2014-03-21得票数 0
无限滚动到我们的自定义PLP页面仅适用于页面加载。选择分面搜索后，无限滚动功能在附加分面响应后不起作用。请有人帮助我们有无限滚动功能后，方面的搜索结果被追加工作。 提前感谢
浏览 16提问于2021-03-19得票数 0
1回答
我现在有一个调度应用程序，它的顶部有一个时间轴。然而，这个时间轴的长度是固定的。我如何使这个无限，所以当用户滚动左或右，他们只是进一步滚动到过去或未来？？
请参阅此以查看固定长度时间轴的基本示例。
谢谢
浏览 9提问于2016-11-26得票数 0
回答已采纳
1回答
我尝试在onscroll期间执行延迟加载。代码如下：
$(window).scroll(
function() {
if ($(window).scrollTop() > ($(document).height() - $(window).height() - 200) && !loadNews))
{
loadNews = true;
loadMoreNewsItems();
浏览 0提问于2013-08-01得票数 2
这是脚本将查询数据库中的数据时，用户滚动到网站的底部，但我想查询数据之前的箭头栏等于浏览器的底部。我想在用户滚动到2/3或接近浏览器底部时查询数据或加载ajax
$(document).ready(function () {
var lastScrollTop = 0;
document.addEventListener("scroll", function() { // or window.addEventListener("scroll"....
var st = window.pageYOffset || documen
浏览 26提问于2016-07-29得票数 0
回答已采纳
我有一个名为home.html的html文档。我希望在查看器向下滚动或滚动辊到达底部时加载一个新的html文档。
然而，我所见过的所有教程对我来说似乎都太高级了。我是一名学生，是javascript的新手。
那么，有没有人愿意向我介绍如何创建一个超简单的无限滚动网页，如果可能的话，只使用html和javascript。我不知道php。
谢谢你愿意提供的任何帮助。
浏览 5提问于2014-01-12得票数 5
2回答
滚动jquery插件
、、、
当你向下滚动项目时，有没有什么jquery插件可以用动画淡入？当我滚动时，也可以加载一些图像。或者，当我向下滚动项目淡入或图表以过渡动画显示时，是否有任何教程可以手动执行此操作？
浏览 1提问于2012-08-29得票数 0
回答已采纳
如何使用jquery在ajax加载的元素滚动上调用函数。这段代码可以正常工作。但是在通过ajax代码加载元素之后就不能工作了。元素"ElementNameHere[]“是通过ajax加载的。
jQuery(function($) {
$('[name="ElementNameHere[]"]').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
浏览 0提问于2015-01-31得票数 0
1回答
我正在使用无限的ajax滚动进行分页，但是“加载更多项目”链接似乎从来没有显示“没有剩余”，并且一直在页面1和2之间循环。
我已经尝试了4个其他的分页脚本，它们在无限的ajax滚动中根本不起作用，因为它显示‘没有留下’，而实际上应该还有3个页面。
所以我的问题是，插件如何知道何时停止显示“加载更多项目”？
我的第二个问题是，有人能推荐一个可以与无限ajax滚动一起工作的分页脚本吗？
浏览 4提问于2015-09-11得票数 0
你知道如何在iGoogle上实现像谷歌阅读器这样的无限滚动窗口小部件，它动态加载数据，滚动条被一对上下箭头取代。
我有一个这样的html结构：
<div id="note_column">
<ul class="messages">
<li class="note">
....
</li>
.
.
.
</ul>
</div>
我尝试在这个div中使用无限滚
浏览 2提问于2010-04-09得票数 1
回答已采纳
1回答
我见过一些插件，当你滚动到页面底部时，它们加载了更多的内容，但大多数插件都链接到数据库中具有自动递增id的列。我只需要用一个XML文件来做这件事。
有什么想法吗？
非常感谢。
浏览 2提问于2011-02-22得票数 0
回答已采纳
我正在尝试让jquery-ias与masonry一起工作，但我无法让它工作。
我正在使用mysql数据库和php来加载图像。
经过大量的试验和错误，我几乎让所有的东西都正常工作了。
我能够让我的所有图像正确加载到一个砖石网格。
我也可以让无限滚动工作。
我的问题是，我不能让加载gif工作或‘加载更多的项目’按钮出现。
我使用的代码是
<script type="text/javascript">
var $container = $('.wrap');
$container.imagesLoaded(function()
浏览 1提问于2014-04-25得票数 0
4回答
无限滚动对SEO不利吗?因为内容是通过javascript加载的，而不是初始HTML的一部分？这应该是一个值得关注的问题吗？这方面的最佳实践是什么？
浏览 0提问于2012-11-09得票数 3
回答已采纳
3回答
如果您阅读 on Reuters.com并向下滚动到页面底部，将显示另一篇文章，并更改url。如果您回滚，您将看到上一页和前面的url。
当一个页面向下滚动时，我只想一个接一个地加载三个php页面。有干净的方法吗？
类似于：
Page1：
<code of Page1>
<append Page2 code>
Page2：
<code of Page2>
<append Page3 code>
无限滚动库(如jquery)似乎不支持这种行为，或者至少我不知道如何支持。
浏览 3提问于2018-04-10得票数 0
回答已采纳
2回答
我尝试了大多数教程和博客，关于rails的无限滚动，但似乎没有一个对我有效，什么是实现加载更多或使用rails的无限滚动的最简单方法
浏览 3提问于2015-12-12得票数 0
2回答
我正在寻找一些技术，这将使我开始做服务器端分页上的鼠标滚动。我有一个大的数据集，我想要加载成块，然后动态加载更多的鼠标滚动，但在服务器端。我偶然发现了，但这看起来像客户端。有什么方法可以帮我开始这件事吗？
浏览 3提问于2014-10-15得票数 0
回答已采纳
1回答
我对Symfony2完全陌生，不完全了解路由和模板。请帮助解决以下问题:我需要用Symfony 2和Ajax实现无限滚动。我有从db获取10个画廊项目的indexController。我希望每次向下滚动时都能多得到10个项目。下面是控制器：
/**
* @Route("/", name="gallery_homepage")
*/
public function indexAction(Request $request)
{
$em = $this->getDoctrine()
->getEntityManager();
浏览 1提问于2015-10-06得票数 3
1回答
我正在使用无限涡旋插件我的产品清单。插件正在从JSON中加载数据，如果我不启用历史记录，它就能正常工作。
现在，我希望插件改变历史，所以当用户打开一个产品详细信息页面，然后使用后退按钮时，他/她将被重定向到最后一个滚动位置。
当我启用history: 'replace'选项时会出现问题，该选项将更改服务器端脚本的子文件夹和路径的页面URL，从而破坏所有链接和图像。
这是我的init代码：
$infiniteContainer = $('#resultsContainer').infiniteScroll({
path: function() {
浏览 4提问于2020-08-24得票数 1
回答已采纳
在facebook页面内容加载后，我的another.When向下滚动它加载另一个page.Which技术使之成为可能？
浏览 0提问于2013-02-22得票数 0
回答已采纳
我先解释一下我想做什么。
我有一个带有缩略图的图片库网格布局页面。每个缩略图都是相同的大小，例如120 pxx80px。我想显示所有的图像在页面上加载和更多的用户滚动在页面上。将在网格中对单个图像进行悬停和单击状态，在该网格中，完整大小的图像将弹出以显示在一个照明盒中。
什么样的解决方案(宝石、技术等)是否需要将较大(1024x768)的图像加载到我的数据库(Photo)模型中，以便生成预定义的较小大小的缩略图？
如果我的目标是让更多的用户在页面上滚动时加载更多的小图像，那么加载一整页的最佳方法是吗？或者我应该只加载用户看到的内容，然后在用户向下滚动时使用AJAX加载更多内容？
在
浏览 2提问于2013-01-23得票数 0
我正在努力学习编写Tumblr主题的代码(我对Wordpress没有钱)，我想知道如何实现文章的“无限/无限滚动”(而不是分页)；我宁愿不使用两个主要的无限滚动脚本中的任何一个，因为infinite-scroll-js (由Paul爱尔兰语编写)文档相当丰富(我能够让它正常工作)，但我希望更多地控制这些帖子的加载方式，也就是说，Cody Sherman的无限滚动代码根本没有文档化，我也不知道它应该如何使用(这些变化很大的指令是由几个非编码者分发的，他们对Javascript的掌握程度不如我，这是在说些什么)。
我不知道任何Ajax，但我愿意根据需要阅读尽可能多的JS文档。在突然添加帖子时，我是
浏览 8提问于2014-02-08得票数 4
回答已采纳
4回答
我有一个页面(让我们称之为1.php)，它使用jQuery-ajax将2.php加载到div-box中。2.php从我的数据库打印20条记录。当我滚动到div-box的底部时，我希望它加载接下来的20条记录。像Facebook、Twitter等就是这么做的。
现在，我已经得到了这种行为，但只有当它自己加载2.php时！但不是在div-box中。
我该怎么做呢？
提前感谢！
浏览 1提问于2011-05-29得票数 3
回答已采纳
1回答
我需要检测滚动视图是否已经到达底部，当用户向下滚动时，我可以加载更多的数据吗？我该怎么做才是最好的方法呢？我试过了：
scrollView.addEventListener("scrollend", function(e){
b = 10;
AddList();
});
但我不能解决我的问题，因为当滚动视图停止滚动时，它会将数据加载到滚动中，并且只在IOS中有效，我需要它在android中也有效。
我没有用合金文件夹
浏览 3提问于2016-03-11得票数 1
我有一个商店，显示一个类别的所有产品在一页(这是业主喜欢它，所以分页不是一个选项)。
为了改善一些重类别的加载时间，我希望实现一个scrip，它将加载许多产品<li>s，然后在页面上滚动，加载另一组。
页面是使用此结构生成的。
<div id="CategoryContent">
<ul class="ProductList">
<li class="Odd">Product</li>
<li class="Even">Prod
浏览 5提问于2012-05-02得票数 3
回答已采纳
我使用了2个jQuery脚本在一个页面，这是由重复的元素(基本上是一个缩略图画廊)。脚本位于html页面的末尾，位于两个单独的脚本标记中。
第一个调用一个脚本，该脚本利用touchTouch插件，该插件以漂亮的覆盖形式呈现图像，并允许您滑动以进行导航。
第二个是无限AJAX滚动，当你向下滚动时，它会向页面添加更多的项目。
我似乎遇到的问题是，当页面第一次加载时，touchTouch脚本会修改页面上的拇指。然后我滚动，无限滚动脚本附加了更多的拇指，但是新附加的拇指不会被touchTouch脚本修改，所以当单击时，它们不会像应该的那样工作。
在无限滚动脚本向页面添加了新元素后，如何让touchTo
浏览 2提问于2015-07-02得票数 0
我有JSON，比如：
{
"nextToken": "aGFsYW1hbj03NT0xNDkxMTI0NTA1", // token for next query
"results": [
{
"id": 100
},
{
"id": 102
},
...
]
}
如何使用数据nextToken表单JSON解析到HTML并使用无限滚动？搜索一下，但没找到。id选择器
浏览 1提问于2017-04-02得票数 0
回答已采纳
1回答
我会在Scroll上加载数据，而不是一个ajax调用，我的代码是：
$.ajax({
type: 'GET',
url: url,
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
$.each(data, function (index, element) {
浏览 2提问于2017-03-28得票数 0
回答已采纳
如何在回收器视图滚动时停止加载图像，并仅在停止滚动时才开始加载？
浏览 0提问于2016-12-12得票数 1
1回答
我对代码点火器很陌生。我已经创建了一个页面，其中包含了大量的内容单页。我想以一种奇特的方式加载这些内容，就像它应该加载一些内容一样，当我们向下滚动到页面的末尾时，它应该显示某种加载特性，并加载其他内容等等。
这类网站的例子可以在Facebook、Twitter或Quora等社交网站上看到。
我已经彻底找遍了，找不到合适的东西。
任何帮助都将不胜感激。谢谢
浏览 4提问于2014-08-10得票数 0
回答已采纳
2回答
在页面上滚动加载新文章
、、、、
参见这个参考站点：http://alwaysjudging.com/archive/它正在向下滚动加载新的帖子，类似于Infinte插件。(但我无法让插件使用posts查询在静态“归档”页面上工作，因此我看到了这一点。)
Ho我会在页面上实现这个特性吗？
当我查看上面参考站点的源代码时，它会显示脚本在这里加载：http://alwaysjudging.com/assets/js/scripts.min.js
看来选择器包含“. appears”和ol li标记.
我是一个前端开发人员，所以我实际编写Javascript和PHP的知识非常有限。如果你能解释我如何可以使用这个在我的网站单页工作，这
浏览 0提问于2014-05-26得票数 0
1回答
动态加载数据的滚动我正在工作的一个web应用程序，在那里我们需要显示超过200行在一个单一的页面。
实现这一目标的最佳途径是什么？根据要求，我们不能使用分页。我们正在研究诸如Adobe中的Live滚动之类的选项，还有哪些其他框架可以帮助您高效、轻松地完成这项工作？
提前谢谢。如何在滚动页面到底部时加载更多JSON数据？比如无限涡旋或者类似我的.JS
浏览 2提问于2014-06-25得票数 1
2回答
我想让HTML数据表具有水平滚动和垂直滚动，并使列标题保持不变，这样如果有人向下滚动到记录#943，他们仍然可以看到列的名称。
我在谷歌上搜索了很多解决方案。我试了两个更好看的。我放弃了第一个使用AJAX获取和装入表的方法。它让我的页面加载很慢。
第二个是完美的，直到我尝试在Internet Explorer8中加载包含1000条记录或更多记录的表，它就死机了。在Firefox和Chrome上运行得又好又快。不幸的是，我的大多数用户都是Internet Explorer用户。
我也很担心，因为我的一个朋友联系了DevExpress，说他的库有问题，被告知JQuery与IE有兼容性问题。我在网上
浏览 0提问于2012-06-30得票数 0
回答已采纳
有些网站(比如Facebook)只加载一定数量的页面，直到你向下滚动到接近尾端时，它们才会加载更多的数据。是否有一种方法，使用HTTPWebRequest，您可以检索所有(或更多)的数据，比通常显示的不滚动到底部？
如果我做这样的事：
HttpWebRequest r = (HttpWebRequest)WebRequest.Create("www.facebook.com");
HttpWebResponse resp = (HttpWebResponse)r.GetResponse();
该响应将只显示有限的数据，将出现，如果您访问该网站，并没有向下滚动。
希望这是有意义
浏览 2提问于2013-11-21得票数 2
回答已采纳
2回答
今天早些时候，我浏览了一下quartz，发现了一些有趣的事情。当你在一篇文章之间向下滚动到下一篇文章时，网站的路线会随着你的滚动而改变。是什么技术/javascript包驱动了这一切？
Ex
浏览 1提问于2014-12-05得票数 0
我有一个循环的文章，我使用无限滚动来分页。我使用SimpleModal来调用每个帖子的完整帖子弹出窗口，但它只对最初加载的帖子有效。无限滚动调用的任何帖子都会直接点击到实际的帖子页面。为什么会发生这种情况？
浏览 2提问于2012-04-06得票数 1
回答已采纳
基于这个文章
我有一个SERP，它可以无限滚动来加载大于10的结果。
如何实现rel=next & rel=prev？
浏览 0提问于2012-03-15得票数 5
回答已采纳
1回答
我是ReactJ的新手。
在我的应用程序中，当页面向下滚动时，我需要一个懒惰的加载程序，我正在使用()
实际上，这是很好的工作，但它第一次加载所有数据。
当页面向下滚动时，我想调用api并设置数据。
谢谢。
浏览 2提问于2017-02-09得票数 2
3回答
有没有可能在向下滚动的同时实现facebook风格的内容加载？我想在一个电子商务网站上实现它。每个类别中有很多项目，类别页面变得太长。我可以实现页码，但我的客户希望我实现facebook类型的加载。有什么我可以用的吗？网站的其余部分已经建好了。
我确实研究了django-无限分页，但不能让它工作。有没有可以让我看一看的演示？
浏览 3提问于2011-12-05得票数 10
回答已采纳
2回答
这就是正在发生的事情。我有一个叫做"home.html“的html文档。它包含许多div，每个div都是一个单独的post。我也有一个index.html，里面有一个div #内容。index.html中的内容是空的，但是通过.load()调用在home.html中填充了div。另外，在.load调用中使用div:nth-child(-n + 10)，我可以让它只加载前十个帖子。如何使用waypoint.js为其添加无限滚动功能？因此，一旦滚动条到达底部的75%，它就会从home.html加载下10个div。
浏览 2提问于2012-05-05得票数 2
回答已采纳
1回答
我正在使用knockoutjs绑定数据，这是我第一次使用knockoutjs，我有一个列表数据显示到表格中，当用户向下滚动到底部时，它将加载更多的新数据。下面是我的代码：
HTML：
<div data-bind="template: { name: 'product-template', foreach: listProduct }" id="data-list"></div>
<script type="text/html" id="product-template">
&
浏览 3提问于2015-12-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
