ajax文字上下滚动,ajax页面底部滚动加载效果实例

html部分：

//ajax读取的 data.html 使用append 的方式添加到这里

//ajax 状态文字输出到这里【数据加载中】【数据加载成功】【没有数据了】

js代码需要jquery支持。

//滚动加载开始

$(function(){

var loading = false; // 状态锁默认 false

var next_url = 'ajax.php'; //ajax读取数据地址，ajax 每次都修改为 data.next_url 下一页地址

var $pages = $('#scrollPages'); //绑定分页容器分页状态在此位置输出

var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把

var _loading = function(){ console.log('数据加载中...'); $pages.html('数据加载中...'); }

var _loadok = function(){ console.log('数据加载成功！'); $pages.html('数据加载成功！'); }

var _nodata = function(){ console.log('没有数据了') ; $pages.html('没有数据了'); }

$(window).scroll(function(){

var sH = $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离

var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部

if( loading ){return false ;}

//条件

if ( sp > 33 ){

loading = true;

_loading();

$.getJSON(next_url,{}, function(data){

console.log(data);

next_url = data.next_url;

if(data.html){

$scrollBox.append( data.html );

$('.zzbsList .zzbsInfo').txtCur({n:60});

loading = false;

_loadok();

}

//判断是否还有吓一跳

if( !next_url ){ loading = true ; _nodata() };

});

}

});// 滚动结束 $(window).scroll

//页面加载完成清空$scrollBox 内容

//页面加载完成执行第一次

$(window).scroll();

});

php 文件 ajax.php 代码：

header("Content-type:text/html;charset=utf-8");

//休息1秒钟 ,模拟网速不好，可以看清 ajax状态变化

sleep(1);

//读取GET提交的页码

$p = (int)$_GET['p'] ;

//准备返回的数据

$d = array();

//下一页地址

$d['next_url'] = 'api/bisai-list.php?p='.($p+1);

//数据 html格式，jquery会把他插入到

中。

$d['html'] = '

ajax 读取到的数据，当前页面 '.($p+1).' ';

//简单判读只有10页面内容

if($p > 10){

$d = array(); //没有数据了 js 主要判断 $d['next_url'] 的值

}

//返回json数据

die(json_encode($d));

————–我是分割线—————

上边的 js 代码存在一个问题。

//页面加载完成执行第一次$(window).scroll(); 尽管调用了滚动事件，但无法满足条件： if ( sp > 33 ) 出发ajax加载数据。

后来想想，干脆把 ajax加载数据部分代码封装成函数_ajaxLoad，在需要的时候直接调用。

1.页面第一加载时调用

2.滚动满足条件时调用

修改js代码如下：