<!DOCTYPE html>

<html lang="zh-CN">

    <head>

      <meta charset="UTF-8" />

      <title>滚动条到底部时自己加载新的内容</title>

      <script type='text/javascript' src='js/jquery.js'></script>

        <script type="text/javascript">

          var page_num=2;

          $(document).ready(function(){

            $(window).scroll(function(){

              if($(document).scrollTop()>=$(document).height()-$(window).height()){

                var div1tem = $('#container').height()

                var str =''

                $.ajax({

                    type:"GET",

                    url:'ajaxdata',

                    dataType:'json',

                    beforeSend:function(){

                      $('.ajax_loading').show() //显示加载时候的提示

                    },

                    success:function(ret){

                     $(".after_div").before(ret) //将ajxa请求的数据追加到内容里面

                     $('.ajax_loading').hide() //请求成功,隐藏加载提示

                    }

                })

              }

            })

          })

        </script>

      {/literal}

    </head>

    <body>

     <div>

        <div style='width:100%;height:1200px'>文章内容</div>

        <div class='after_div'></div>

　　　　 <div class='ajax_loading' style='background:#F0F0F0;height:60px;width:100%;text-align:center;line-height:60px;font-size:18px;display:none;position:fixed;bottom:0px'><img src="img/loadinfo.net.gif"> 数据加载中</div>

     </div>

    </body>

</html>

参考：http://www.oschina.net/code/snippet_1042544_20893

Jquery实现滚动到底部加载更多（最原始）的更多相关文章

  1. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  2. XRecyclerView：实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView

    介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...

  3. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  4. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

  5. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  6. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  7. Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

    http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...

  8. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  9. jQuery实现滚动时动态加载页面内容

    有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

随机推荐

  1. KeyBord事件从Activtiy层往下分发详细过程代码示例

    step1:调用Activity成员函数dispatchKeyEvent public boolean dispatchKeyEvent(KeyEvent event) { // Let action ...

  2. oracle：db-link使用

    二个oracle instance,如果需要在一个instance上,直接查询另一个instance上的数据,就要用到db-link 创建: create public database link 链 ...

  3. .Net 异步方法加上“timeout”

    在本羊读大学的时候,Thread让本羊云里雾里,代码写的痛不欲生,真的是让本羊脑袋里很多“线”缠绕在一起. 之后,Task让本羊代码写的飞起,甚至有时候根本不需要Task的时候还是要写上,那样显得档次 ...

  4. WPF 让子元素动起来！

    在没有接触Blend之前,自己整出了一个MultiTouchHelper,这东西是做什么的呢?就是利用附加属性让元素可以多点触控. 然后某一天发现Blend里面有一个Behavior的东西,我去,原来 ...

  5. 283 Move Zeroes

    /** * 题意:将0挪到末尾,并且不改数组中原有元素的顺序 * 解析:找到0元素,然后寻找其后面非0的元素,进行交换位置 * @param {number[]} nums * @return {vo ...

  6. Sql 2012 远程数据库连接

    新装好的数据库,各种远程连接设置都设置好后.发现还是连接不上. 这时候,问题可能出在端口上,远程连接的时候需要指明端口.动态端口一般都会变.在本机连接时候,会自动选择端口.在远程访问时候,就必须要指明 ...

  7. Windows Azure 云服务角色架构

    当我们使用VS发布一个Cloud Service或者在Portal上上传发布包后,就能启动和运行一个云服务,可以保护WebRole,WorkerRole的一个或者多个实例. Windows Azure ...

  8. scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别

    scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不 ...

  9. 【CSS】 background

    background: #22b4ff //背景色 url("http://images.cnblogs.com/cnblogs_com/oiliu/529256/o_titleIMG.jp ...

  10. Mysql与Redis的同步实践

    一.测试环境在Ubuntu kylin 14.04 64bit 已经安装Mysql.Redis.php.lib_mysqludf_json.so.Gearman. 点击这里查看测试数据库及表参考 本文 ...