[英]Lazy Scroll loading in Ajax call
I have fetched users data from a wordpress site using ajax call like this: 我已经使用ajax调用从wordpress网站获取了用户数据,如下所示:
$.ajax({
url:"http://..../wordpress/wp-json/wp/v2/users",
type: 'GET',
dataType: 'JSON',
data: {limit: 6, order: 'asc'},
success : function(data){
for(i=0; i < data.length; i++){
$('div.about-us').append('<div class="col-md-4 single-grid '+data[i].id+'" onclick="myFunction(\'' + data[i] + '\')"><div class="col-md-11 text-center"><img src="'+data[i].profileImage+'"><h4>'+data[i].name+'</h4><strong>'+data[i].job_title+'</strong></div></div>');
}
}
I am appending each data dynamically. 我正在动态附加每个数据。 I have lot of data here " http://..../wordpress/wp-json/wp/v2/users ". 我在这里有很多数据“ http://..../wordpress/wp-json/wp/v2/users ”。 I want only 6 rows initially and if i scroll down it should load another 6 rows. 我最初只需要6行,如果我向下滚动,它应该再加载6行。 I dont want to use jquery plugin. 我不想使用jQuery插件。 Overall what i want is lazy scroll loading without any plugin. 总的来说,我想要的是没有任何插件的延迟滚动加载。
Use something like this: 使用这样的东西:
var scrollLimit = 500; // Amount after which ajax() call initializes
var limit = 3; // item count
var offset = 6; // offset
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= scrollLimit)
{
loadContent(limit, offset); // loadContent method in which ajax() call is defined
// Update values on each scroll
scrollLimit = scrollLimit + 500;
offset = offset + 3;
}
});
Instead limit: 6 tried like this: 取而代之的是:6个这样的尝试:
data : {per_page:6, page:page_no}
Solved my problem. 解决了我的问题。 Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.