页面滚动到底部自动 Ajax 获取文章

 代码如下 复制代码

var _timer = {};
function delay_till_last(id, fn, wait) {
    if (_timer[id]) {
        window.clearTimeout(_timer[id]);
        delete _timer[id];
    }
 
    return _timer[id] = window.setTimeout(function() {
        fn();
        delete _timer[id];
    }, wait);
}
 
$(document).ready(function() {
    var Ajax_Url = null;
    $(window).scroll(function(){
        delay_till_last(‘scroll_Ajax‘, function(){
            if($(window).scrollTop() >= $(document).height() - $(window).height() - 80){ //如果你没有底部固定栏可以把 80 适当减少
                Ajax_Url = $(".nextpage a").attr("href");//一个隐藏 a 标签储存下一页要拉取的链接
                if( Ajax_Url ){
                    $.ajax({
                        type: "GET",
                        url: Ajax_Url,
                        success: function(data){
                            $(".nextpage").remove();
                            $(".postlist").append(data);
                        },
                        error: function(data){
                            $(".postlist").after(‘<div id="ajax-list-error">文章获取失败</div>‘);
                        }
                    });
                }else{
                    ajax_load_hide();
                    $("#ajax-list-error").remove();
                    $(".postlist").after(‘<div id="ajax-list-error">全部文章已加载完毕，没有更多的文章了~</div>‘);
                }
            }
        }, 100);
    });
});

一开始的 delay_till_last 函数用来防止事件重复触发，也就是重复的内容加载好多遍。

.postlist 为文章 li 的 ul，有两处注意修改。

改造主循环，现在 function.php 里放一个函数

 代码如下 复制代码

//Ajax Get List
function Bing_is_ajax_list(){
  if( isset($_GET["action"]) && $_GET["action"] == "ajax_list" ) return false;
  return trun;
}

Bing_is_ajax_list() 可以判断是否为 Ajax 请求，返回假为 Ajax

主循环：

 代码如下 复制代码

wp_reset_query();
if( have_posts() ):
 if( Bing_is_ajax_list() ) echo ‘<ul class="postlist">‘;
 while( have_posts() ):
  the_post();
  //文章样式，我用的一个函数
  Bing_postlist_li();
 endwhile;
 if( Bing_is_ajax_list() ) echo ‘</ul>‘;
 echo ‘<div class="nextpage">‘;
  next_posts_link( ‘‘ );
 echo ‘</div>‘;
endif;

最后记得用 Bing_is_ajax_list() 判断，让为假（Ajax 请求）的时候把包括和文章列表 ul 标签自身给去掉，只加载一堆 li

时间： 2024-08-29 18:56:25

页面滚动到底部自动 Ajax 获取文章的相关文章

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p:

jQuery判断页面滚动到底部

有时候我们需要页面滚动到底部的时候去加载更多的数据,实现思路基本上就是判断浏览器页面是否滚动到了页面底部,当滚动到页面底部的时候,用AJAX异步获取数据然后加载到页面中. 利用jQuery判断浏览器页面是否滑动到了底部: <script type="text/javascript"> // scroll event $(window).scroll(function(){ // scroll at bottom if ($(window).scrollTop() + $(w

关于JQuery实现滚动到底部自动加载中应当注意的地方

在滚动到底部自动加载时常常用到以下代码 container.bind('scroll', function(){ if(container.scrollTop() + container.height() >= container.prop("scrollHeight")){ loadNextPage(); } }); 其中container.prop("scrollHeight") 就相当于 container.get(0).scrollHeight 用于获

js-让页面滚动最底部，显示到最底部

应用场景,聊天webapp中,让页面初始化的时候或者页面更新的时候,都让页面显示在最底部的聊天内容 可以借助react中的两个生命周期函数 componentDidMount和componentDidUpdate componentDidMount() { // 初始显示列表, 让页面滚动到底部scrollTo(x轴0, Y轴为内容滚动的高度) window.scrollTo(0, document.body.scrollHeight) } componentDidUpdate () { //

listview滚动到底部自动加载数据

在android中listvieww加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,listview加载就变的慢,如果是有图片的话,一时浪费流量,二是item中带图片会出现错位的问题,listview加载数据目前好多app做法 一:分批加载 滑动到底部自动更新 二:滑动到底部 手动的点击加载更多 三:下拉刷新+底部加载更多 今天就讲下listview滑动到底部自动更新 分析:监听listview的滑动事件,判断listview是否滑动到底部,然后去加载

[转]ListView滚动到底部自动加载数据

转自:http://blog.csdn.net/shineflowers/article/details/41744241 在Android中有很多时候会选择用ListView加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,ListView加载就会变慢,如果是有图片的话,一是浪费流量,二是item中带图片会出现错位的问题l,ListView加载数据目前好多App的做法 1. 分批加载,滑动到底部自动更新 2. 滑动到底部,手动的点击加载更多 3. 下拉

手机页面滚动到底部刷新数据

1 //滚动到底部加载数据 2 $(window).scroll(function () { 3 var scrollTop = $(this).scrollTop(); 4 var elementHeight = $(this).height(); 5 var h1 = scrollTop + elementHeight; 6 var scrollHeight = document.documentElement.scrollHeight; //var documentHeight = $(d

jquery使页面滚动到底部

function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTop(h); } (摘抄自http://www.cnblogs.com/hui-blog/p/5526278.html)

检测页面滚动到底部

原理是: 滚动高度 + 页面高度 ＝ 页面滚动总高度 代码如下: //文档的总高度 function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; } if(document.documentElement){ documentScro