页面滚动到底部自动 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

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

  1. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  2. 随着页面滚动,数字自动增大的jquery特效

    首先为了截出gif图,我下载了一个小工具 GifCam: https://www.appinn.com/gifcam/ 随着页面滚动,数字自动增大的jquery特效 主要就是依赖这个脚本script. ...

  3. jquery 判断页面滚动到底部

    $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离$(document).scrollLeft() 这是获取水平滚动条的距离获取顶端 只 ...

  4. jquery让页面滚动到底部

    function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTo ...

  5. jquery使页面滚动到底部

    function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTo ...

  6. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Layman H5+Webapp+MUI App 页面滑至到底部自动加载新的内容

    要点:使用jquery的scroll()方法实现,当用户滚动指定的元素时,会发生 scroll 事件 scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) scroll() 方 ...

  8. [页面滚动到底部]jquery $(window).height()取值等于$(document).height()的问题

    问题现象:JSP中头部引用了某个head.jsp,在videoList.jsp中生成片段时如下 实际最终生成的HTML如下: <!DOCTYPE html>没有解析到,原因找到了,先想办法 ...

  9. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

随机推荐

  1. [LeetCode] Island Perimeter 岛屿周长

    You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...

  2. .NET WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制

    项目背景是一个社区类的APP(求轻吐...),博主主要负责后台业务及接口.以前没玩过webAPI,但是领导要求必须用这个(具体原因鬼知道),只好硬着头皮上了. 最近刚做完权限这一块,分享出来给大家.欢 ...

  3. oracle日常——数据库备份

    1.进入cmd 2.运行命令 exp [scott]/[orcl]@[orcl] file=[d:\oracle_back\scott_orcl.dmp] owner=scott 格式如下: exp ...

  4. python基础-生成随机字符串方法

    python解释器示例 >>> import uuid >>> uuid.uuid1() UUID('ae6822e6-c976-11e6-82e0-0090f5f ...

  5. .Net Core Linux centos7行—发布程序到生产环境

    实验demo现在需要发布到生产环境,发现在发布的时候要考虑到不一致的几个地方. 1.各类配置文件线下,线上不一致. 2.绑定的url不一致,可能是域名不一致,也可能是schema不一致(http,ht ...

  6. error: failed to push some refs to 'https://github.com/github账号/learn_git.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caus

    在使用git 对源代码进行push到gitHub时可能会出错,信息如下   此时很多人会尝试下面的命令把当前分支代码上传到master分支上. $ git push -u origin master ...

  7. Your app declares support for audio in the UIBackgroundModes key in your Info.plist 错误

    提交AppStore时候被拒绝 拒绝原因:Your app declares support for audio in the UIBackgroundModes key in your Info.p ...

  8. jQuery-DataTables相关的网址

    DataTables 有没有觉得这张图的数据很熟悉,对,他们都是copy来的. 之前用了一个bootstrap的框架,写那个框架的老师,有点抠门,把很多js都合在了一起,不知道怎么去自定义自己的东西, ...

  9. 【从html到算法框架】科技白学习计划书

    一.学习计划 根据对Web知识层次的梳理,我觉得可以把它分别以技术和思想两个维度进行分类.从技术维度上讲,Web知识有内容.结构.样式.操作(静态的修改与动态的修改(动态,例如使用定时器)).交互(与 ...

  10. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...