微博下拉滚动条到底部加载内容特效

技术分享 2019-10-01 00:00:00
新浪微博,腾讯微博,瀑布流和其他sns站点等都有这种效果,一直往下拉永远也显示不完。其实是一般分页的一种变种。

似乎这种技术是facebook最早实现的,好像叫bigpi,据说是facebook用来解决访问量大的问题,好像说一个页面的加载如果达到5秒,用户就会离开,而这种技术可以将一部分内容隐藏,用户的滚动条往下拉它才出现,显然可以改变用户的感觉。

参考代码:
$(function () {
var i = 0;
$(window).bind(“scroll”, function (event) {
//滚动条到网页头部的 高度,兼容ie,ff,chrome
var top = document.documentElement.scrollTop + document.body.scrollTop; //??????
//网页的高度
var textheight = $(document).height();
// 网页高度-top-当前窗口高度
if (textheight – top – $(window).height() <= 100) {
if (i >= 25) {
return; //控制最大只能加载到100条
}
$(‘#divContent’).css(“height”, $(document).height() + 400);
i++;

//可以根据实际情况,获取ajax动态数据加载到 divContent中

var dataParas = ‘{ pageIdx:”‘ + i.toString() + ‘”}’; // 这里要直接使用JOSN作为webService参数
$.ajax({
type: “POST”,
dataType: “json”,
contentType: “application/json”,
data: dataParas,
url: “../MicroBlog.asmx/GetMicroBlogs”,
success: function (data) {
//将获取到的JSON对象数组转换为js对象
var blogs = eval(“MicroBlogs = ” + data.d);
//遍历微博对象数组,追加到divContent中
for (var j = 0; j < 4; j++) {
$(‘
’ + blogs.MicroBlogs.Sender + ‘
’).appendTo($(‘#divContent’));
}
},
error: function () {
alert(“error occured!”);
}
});
}
});
});

//页面加载时引发
$(document).ready(doc_ready);

//页面加载时加载前4条微博
function doc_ready() {

var jsonParas = ‘{ pageIdx:”0″}’;
$.ajax({
type: “POST”,
dataType: “json”,
contentType: “application/json”,
data: jsonParas,
url: “../MicroBlog.asmx/GetMicroBlogs”,
success: function (data) {
var blogs = eval(“MicroBlogs = ” + data.d);
for (var j = 0; j < 4; j++) {
$(‘
’ + blogs.MicroBlogs.Sender + ‘
’).appendTo($(‘#divContent’));
}

},
error: ajax_error()
});

}

function ajax_error() {
//alert(“The call to webService is failed!!!!!”);
}

好像找个div专门存当前的页码吧
咨询小瓶科技
咨询我们
顶部