您的位置：首页 > Web前端 > JQuery

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

2013-08-06 17:20 746 查看

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中
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++) {

$(‘<div>’ + blogs.MicroBlogs[j].Sender + ‘</div>’).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++) {

$(‘<div>’ + blogs.MicroBlogs[j].Sender + ‘</div>’).appendTo($(‘#divContent’));

}
},

error: ajax_error()

});
}
function ajax_error() {

//alert(“The call to webService is failed!!!!!”);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航