jquery模仿微博向下滚动到页面底部时实时加载新内容

最新推荐文章于 2020-03-01 16:32:28 发布

weixin_30345055

最新推荐文章于 2020-03-01 16:32:28 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/feng-c-x/archive/2013/02/05/2893404.html

本文介绍了一种使用jQuery实现的网页滚动事件监听机制，当页面滚动到底部时，自动请求并加载更多微博内容。通过设置一个计数器变量`i`来控制请求次数，避免无限加载，确保用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery模仿微博向下滚动到页面底部时实时加载新内容

原理很简单，当页面滚动到底部时，执行ajax方法从服武器获取更多json数据，并加载到页面上
$(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中

//页面加载时引发
$(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++) {
$(‘<div>’ + blogs.MicroBlogs[j].Sender + ‘</div>’).appendTo($(‘#divContent’));
}

},
error: ajax_error()
});

}

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

转载于:https://www.cnblogs.com/feng-c-x/archive/2013/02/05/2893404.html